コンテンツ半分の周りに境界線を作るには？

私は、半分のテキストコンテンツの領域をカバーし、半分のテキストのコンテンツは、CSSとHTMLを使用して境界の外にあるべきであるという境界線をデザインしたいと思います。コンテンツ半分の周りに境界線を作るには？

例として以下の画像を参照してください。

2017-07-28 Mudassar

私は尋ねなければなりません - なぜあなたはコンテンツ領域に合わせて十分な大きさではない国境をしたいですか？ –

このために背景イメージを使用することを検討することがあります。 – CodeRomeos

あなたは負のz屈折率と絶対位置擬似要素を使用することができます。

.container { 
 
    position: relative; 
 
    padding: 30px; 
 
} 
 

 
.container::before { 
 
    display: block; 
 
    position: absolute; 
 
    z-index: -1; 
 
    top: 0; 
 
    bottom: 0; 
 
    right: 70%; 
 
    left: 0; 
 
    border: 5px solid #E7E7E9; 
 
    content: ''; 
 
}

<div class="container"> 
 
    <h2>The Title</h2> 
 

 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ut lectus non risus tincidunt lacinia nec ut nunc. Nam viverra ipsum vitae purus tempor, ut maximus lorem semper. Maecenas efficitur feugiat sem, et egestas ex tincidunt eu. Maecenas eu tempor justo. Duis non tempus nunc. Curabitur euismod non lectus non tempor. Cras non risus vel nisl luctus efficitur. Morbi consectetur ante vel ullamcorper semper. Ut interdum risus non velit dignissim aliquet. Ut porta rutrum efficitur. Quisque suscipit est nec tempor vestibulum. Vivamus vel dui at risus auctor ultricies a sed justo.</p> 
 
</div>

出典

2017-07-28 19:13:46

おかげで、あなたのコードは完璧に動作します。 – Mudassar

あなたは、背景の境界線を作成するために、ダミーの絶対のdivを使用することができ、この効果を設計します。

* { 
 
       box-sizing: border-box; 
 
       border: 0px; 
 
       padding: 0px; 
 
       margin: 0px; 
 
      } 
 
      .container { 
 
       position: relative; 
 
       width: 100%; 
 
       height: 500px; 
 
       background: #f9f9f9; 
 
       z-index: 0; 
 
      } 
 
      .fake-border { 
 
       position: absolute; 
 
       width: 40%; 
 
       height: 90%; 
 
       margin: 2.5%; 
 
       z-index: -1; 
 
       border: 5px solid #bdbdbd; 
 
      } 
 
      .content { 
 
       position: absolute; 
 
       top: 50%; 
 
       transform: translateY(-50%); 
 
       padding-left: 100px; 
 
      }

<html> 
 
    <head> 
 
    </head> 
 
    <body> 
 
     <div class="container"> 
 
      <div class="fake-border"> 
 
      </div> 
 
      
 
      <div class="content"> 
 
       <h2>Header</h2> 
 
       <br><br> 
 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> 
 
      </div> 
 
     </div> 
 
    </body> 
 
</html>

出典

2017-07-28 19:22:34

コンテンツ半分の周りに境界線を作るには？

答えて

関連する問題