纯css创建三角形和内外圆
创建三角形原理
当盒子的宽和高(width和height)都是0时,边框显示为三角形。由此可以看出,如何实现各种三角形。如果想实现倒三角,则其他的边为transparent,只设置最上面的边有颜色,则可以实现倒三角,同理可以实现各种三角形。
#test{
width:0px;
height:0px;
border-width:20px;
border-style:solid;
border-color:#e66161 #f3bb5b #94e24f #85bfda;
}
注意;一旦width和height有了长度后,就会有明显不同,代码和截图如下:
<html>
<head>
<style type="text/css">
#test{
width:20px;
height:20px;
border-width:15px;
border-style:solid;
border-color:#e66161 #f3bb5b #94e24f #85bfda;
}
</style>
</head>
<body>
<div id="test">
</div>
</body>
</html>
可以看出每个边都是一个梯形,利用width和height有长度,再加上border-radius属性设置50%,可以设置内外圆,截图如下
倒三角形的实现
#test{
width:0px;
height:0px;
border-width:20px;
border-style:solid;
border-color:green transparent transparent transparent;
}
同样的原理,其余三角形也是通过三条边transparent,另一条边有颜色。
保留上边和右边三角形的实现
#test{
width:0px;
height:0px;
border-width:20px;
border-style:solid;
border-color:green green transparent transparent ;
}