纯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 ;
}
4034
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
