不寻常的边框css

Question

如何使用这种自适应高度做边框？
它可以是纯粹的CSS？

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

Answer 1

我已经创建以下CodePen一个示例代码。 http://codepen.io/jaymanpandya/pen/pRXExJ \

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; 
} 

它使用类名称 '边界' 的具有自适应高度覆盖股利。我已经通过将h1标签向上移动负边距并给它一个白色背景来欺骗上边框的间隙。

希望这会有所帮助。 :)