不尋常的邊框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標籤向上移動負邊距並給它一個白色背景來欺騙上邊框的間隙。

希望這會有所幫助。 :)