css - 圆 Angular 边 Angular

Question

我想知道如何使顶部边框像下图的红线一样？我试过 border-radius，但我不知道如何将上边框的底部圆化。

Answer 1

我会使用 :before 来创建一个可以设置样式的伪元素，因为它仅用于演示，所以使用空元素会显得冗长。

这是一个如何做到这一点的例子:

.splitter {
  border: 1px solid #ddd;
  border-top: 0;
}
  .splitter:before {
    content: ' ';
    display: block;
    position: relative;
    top: -5px;
    width: 100%;
    height: 8px;
    background-color: red;
    border-radius: 100px / 70px;
  }

.myContent {
  padding: 0 20px;
}

<div class="splitter">
  <div class="myContent">
    <h1>React or Angular</h1>
    <p>Lorem ipsum Mollit qui sunt consequat deserunt exercitation veniam.</p>
  </div>
</div>

也可以在 JS Bin 上看到:

http://jsbin.com/hoqizajada/edit?html,css,output