如何制作这个 angular 形状的边框（如图所示）？

Question

我想 div 与这种 angular 区域接壤。正如图片中所说的那样，我用红色椭圆标记了。

这是我目前尝试过的方法：

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 来做到这一点。使用 :after 伪 class 和 css 创建内容，然后将其高度和宽度设置为 0。您可以通过更改 border-width [=30= 来更改三角形的宽度].展示它比说出来容易。这里有一个 demo Fiddle 可以玩。

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

如何制作这个 angular 形状的边框（如图所示）？

How to make this angular shaped border (as its shown in the image)?

html

css

css-shapes