Question

我正在创建一个看起来像GNU / Linux终端的网站。为此，我正在创建一个博客页面，其中有一些框，每个框都是博客文章。这是每篇博文的样板HTML代码：

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

我想在每个盒子上插入一个边框，但是我不想插入一个常规的边框，而是打破顶部，在标题的两边做一个90º度的曲线，如下所示：

Example image

这可能吗？

Answer 1

我希望这就是你要找的东西，

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: