<分区>
html - 如何制作这个棱 Angular 分明的边框(如图所示)？
标签 html css css-shapes
我想用这种 Angular 区域制作 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
最佳答案
您可以使用带边框的纯 css 来做到这一点。使用带有 css 的 :after 伪类创建内容，然后将其高度和宽度设置为 0。您可以通过更改 border-width 属性来更改三 Angular 形的宽度。展示它比说出来容易。这是一个 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;
}
关于html - 如何制作这个棱 Angular 分明的边框(如图所示)？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30414274/