CSS三角形

 

#triangle-up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

<div id="triangle-up"></div>

以上代码可以输出一个三角形，调整左右/底部宽度可以让三角形变形

它背后是什么呢？

一个普通的盒子

一个没有上边框的盒子 (border-top=0，不写也是0)

 

再让它的宽高都为0

 

剩下的底边框和左右边框就撑起来一个三角形

 

再来看这个例子

.triangle {
    border-color: yellow blue red green;
    border-style: solid;
    border-width: 200px 200px 200px 200px;
    height: 0px;
    width: 0px;
}

去掉顶部边框后

.triangle {
    border-color: yellow blue red green;
    border-style: solid;
    border-width: 0px 200px 200px 200px;
    height: 0px;
    width: 0px;
}

再让左右边框变透明

.triangle {
    border-color: transparent transparent red transparent;
    border-style: solid;
    border-width: 0px 200px 200px 200px;
    height: 0px;
    width: 0px;
}

 

 

注意黑色部分应该是透明的白色的。因为编辑器的原因，所以有个bug