CSS实现画三角形

摘要

通过纯CSS实现画三角形效果

1、实现思路

（1）、将元素宽度高度设置为0：width:0;height:0;

（2）、再通过设置元素的四边边框宽度为20px solid red，即得到了一个40*40的小正方形

（3）、再将其他任意三条边把颜色改成透明 transparent;剩下的就是一个三角形

2、示例

.triangle-up1 {    width: 0;    height: 0;    border-top: 100px solid transparent;    border-left: 100px solid transparent;    border-right: 100px solid transparent;    border-bottom: 100px solid red;}.triangle-up2 {    width: 0;    height: 0;    border-left: 50px solid transparent;    border-right: 50px solid transparent;    border-bottom: 100px solid red;}

 <div class="triangle-up1"></div> <div class="triangle-up2"></div>