css四边形加倒三角 |css3一个圆走弧线

shape{
position:relative;
width:200px;
height:100px;
background-color:#f55353;
margin:50px auto;
}
shape:before{
content:"";
position:absolute;
top:-20px;
left:90px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 20px solid #f55353;
}

如上述代码所示，大家首先定义一个四边形的形状，并设置其宽度、高度和背景颜色等属性。

然后，大家使用伪元素 :before 来实现倒三角的效果。设置其 position 为 absolute ，并将其位置定位在四边形的顶部中心。接着，大家设置三角形的样式，即通过设置 border 来实现。

通过这样的方式，大家就成功地在四边形中添加了一个倒三角。这个效果在很多网页设计中都非常常见，例如弹出菜单、提示框等。掌握这个技巧，可以使大家的网页设计更加美观、实用。