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

这可能吗？

答

我希望这是你在找什么，

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>

创建的DIV然后在H3的两侧设置边框的普通边框相当聪明，但是，使这样，我不能在div边框周围溢出，因为如果你看看图像，边框实际上是在div内，而不是在边缘。所以，我通过将边界放在伪元素中来管理它：在div之前，通过这样做，我能够将div边缘放在div上。另外，我将h3的背景定义为与div相同的颜色，并将其移动到与div顶部边缘重叠的位置，从而使其与图像中看到的完全相同。 –

@TheoneLucas我编辑了我的答案，在包装盒外包含一个额外的包装。 Psuedo元素也很好。 –

真的非常感谢您的包装建议，并且对于整个答案，您在h3上设置边框并使用它重叠div边框的技巧非常巧妙，简单而优雅，谢谢。 –

CSS - 顶部有90º曲线的边框

相关推荐