如何制作这个角形边框（如图所示）？

Question

我想用这种角度区域制作div边框。正如它在图像中所说的那样，我标有红色椭圆形。

这是我到目前为止所尝试的：

HTML：

<div class="box">
    <header><b>List header</b></header>
       <ul>
          <li>List 1</li>
          <li>List 2</li>
          <li>List 3</li>
       </ul>
</div>

CSS：

.box{
    border:2px solid gray;
    background: #DC143C;
    padding:10px;

}
.box ul{
   list-style-type:square;  
}

请参阅demo

Answer 1

你可以用带边框的纯css做到这一点。使用带有css的:after伪类创建内容，然后将其高度和宽度设置为0.您可以通过更改border-width属性来更改三角形的宽度。它比说起来更容易展示它。这是一个positional $ operator来玩。

<强> HTML

<div></div>

<强> CSS

div {
    display: inline-block;
    height: 110px;
    width: 500px;
    background: tomato;
    margin-left: 150px;
}
div:after{
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 40px 100px 40px 0;
    border-color: transparent tomato transparent transparent;
    position: absolute;
    left: 60px;
    top: 20px;
}