<分区>
标签 css border css-shapes
<分区>
我使用以下代码创建了一个盒子:
width:153px;
height: 39px;
border: 1px solid #cfcfcf;
出来的是普通盒子。但我想让它的形状如下:
我必须编写什么 CSS 代码才能使它变成这样？我尝试了很多边界代码，但都没有用。
最佳答案
事实证明，是的，你可以。老实说，我无法正确解释它，因为用 css 做多边形是我仍然无法掌握的事情之一。我花了大约 6 次尝试交换边界方向，让三 Angular 形指向上方。所以这是CSS。
本文包含您需要的一切，甚至更多。 http://css-tricks.com/examples/ShapesOfCSS/#triangle-up
.box {
width:153px;
height: 39px;
border: 1px solid #cfcfcf;
margin-top:50px;
position:relative;
}
.box:before {
position:absolute;
content:'';
width:0;
height:0;
top:-10px;
left:50px;
border-left:10px solid transparent;
border-right:10px solid transparent;
border-bottom:20px solid #cfcfcf;
}
.box:after {
position:absolute;
content:'';
width:0;
height:0;
top:-8px;
left:52px;
border-left:8px solid transparent;
border-right:8px solid transparent;
border-bottom:18px solid white;
}
关于css - 如何制作CSS边框形状，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19852128/