css三角形绘制方法总结

最简单方便的方法就是忽略unicode.triangle:after{display:block;内容：“\25B2”；颜色：“#fd5353”；font-size:20px;}注意伪类中一定要加上content属性，否则不会生效unicode图表border.triangle{width:0;高度：0；border-left:50pxsolidtransparent;border-right:50pxsolidtransparent;border-bottom:100pxsolidred;}用border画三角形的原理是什么？其实等宽的边框都是45度对接的，如下图：然后没有上边框，就是如下图：然后设置div的宽度为0，如图下图：然后设置div的高度为0，如下图：最后设置左右边框颜色为透明，如下图：另一个动画：通过这个原理，我们可以制作更多图形，如五角星、六角星等。更多图形请移步shapesofcss，使用css3transformrotate.triangle{width:30%;底边距：21.27%；/*=宽度/1.41*/位置：相对；//高亮overflow:hidden;}.triangle:before{content:'';位置：绝对；顶部：0；左：0；宽度：100%；高度：100%；背景：#0079C6；//焦点变换原点：0100%；transform:rotate(45deg);}为什么是1.41，因为正方形的对角线长度约为。使用clip-path.triangle{width:200px;高度：200px；背景：#fd5353；clip-path:polygon(50%0,0100%,100%100%)in1.414;}clip-path不支持Android4.4以下，其余需要使用浏览器前缀-webkit，caniuse请移步clip-详细路径原文