珍しいボーダーCSS

Question

このような適応的な高さでボーダーを行う方法は？
純粋なCSSですか？

https://pp.vk.me/c639230/v639230336/9dce/Q28JR-9v-Lc.jpg

Answer 1

私は、次のCodePen上のサンプルコードを作成しました。これは、適応高さを持っているクラス名が 'ボーダー' と被覆div要素を持っているHTML

<div class='border'> 
    <h1 class='title'>What we do</h1> 

    <div class='item-chunk'> 
    <p>Image tag comes here</p> 
    <h2>Design</h2> 
    <p>Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p> 
    </div> 

    <div class='item-chunk'> 
    <p>Image tag comes here</p> 
    <h2>Development</h2> 
    <p>Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p> 
    </div> 
</div> 

CSS

body { 
    padding:5%; 
} 

.border { 
    width:500px; 
    margin:auto; 
    border:1px solid #333; 
    padding:1% 2%; 
} 

.title { 
    width:250px; 
    font-size:24px; 
    font-family:Arial; 
    background:#fff; 
    text-align:center; 
    margin:-30px auto auto; 
} 

.item-chunk { 
    text-align:center; 
    padding:5% 0; 
} 

\ http://codepen.io/jaymanpandya/pen/pRXExJ。私は、h1タグを負のマージンで上にシフトし、白い背景を与えることによって、上のボーダーのギャップを欺いた。

これが役に立ちます。 :)