CSS - 頂部有90º曲線的邊框

我正在創建一個看起來像GNU/Linux終端的網站。爲此，我創建了一個博客頁面，其中包含一些框，其中每個框都是博客文章。這是每篇博客文章的樣板HTML代碼：CSS - 頂部有90º曲線的邊框

<div class="post"> 
    <h3 class="post-title">Title</h3> 
    <span class="post-content"> 
     The awesome content goes here. 
    </span> 
</div>

我想將每這些框的邊框，但不是將定期邊界，我想在上面打破，使曲線圍繞標題兩側90°度，像這樣：

Example image

這可能嗎？

來源

2017-04-23 Theone Lucas

我希望這是你在找什麼，

body { 
 
    background: #ddd; 
 
} 
 

 
.wrap { 
 
    width: 300px; 
 
    height: 150px; 
 
    padding: 20px; 
 
    background: #fff; 
 
    margin: 30px auto; 
 
} 
 

 
.post { 
 
    position: relative; 
 
    height: 100%; 
 
    width: 100%; 
 
    border: 3px solid black; 
 
    background: #fff; 
 
    padding: 40px; 
 
    box-sizing: border-box; 
 
} 
 

 
.post h3 { 
 
    position: absolute; 
 
    top: -35px; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
    background: #fff; 
 
    padding: 5px; 
 
    border-left: 3px solid black; 
 
    border-right: 3px solid black; 
 
}

<div class="wrap"> 
 
    <div class="post"> 
 
    <h3 class="post-title">Title</h3> 
 
    <span class="post-content"> 
 
     The awesome content goes here. 
 
    </span> 
 
    </div> 
 
</div>

來源

2017-04-23 01:37:08

創建的DIV然後在H3的兩側設置邊框的普通邊框相當聰明，但是，使這樣，我不能在div邊框周圍溢出，因爲如果你看看圖像，邊框實際上是在div內，而不是在邊緣。所以，我通過將邊界放在僞元素中來管理它：在div之前，通過這樣做，我能夠將div邊緣放在div上。另外，我將h3的背景定義爲與div相同的顏色，並將其移動到與div頂部邊緣重疊的位置，從而使其與圖像中看到的完全相同。 –

@TheoneLucas我編輯了我的答案，在包裝盒外包含一個額外的包裝。 Psuedo元素也很好。 –

真的非常感謝您的包裝建議，並且對於整個答案，您在h3上設置邊框並使用它重疊div邊框的技巧非常巧妙，簡單而優雅，謝謝。 –

CSS - 頂部有90º曲線的邊框

回答

相關問題