利用CSS绘制三角形 并应用在相应的场景中,减少图片的使用,可提高加载速率,降低HTTP请求次数
在同一方向上,大致有三种绘制方式,绘制出来的有两种规格(在保持宽度不变的情况下)
对比图:
假定给第一个三角形命名为 triangle1,则第二第三个分别为triangle2,triangle3
先从第三个最小面积的说起,代码如下:
height: 0;
width: 0;
border-bottom: 40px solid black;
border-left: 40px solid transparent;
同理,可得三角形一二,代码如下:
triangle1:
height: 0;
width: 0;
border-bottom: 40px solid black;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
height: 0;
width: 0;
border-bottom: 40px solid black;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;