css画三角形—border法

对一个盒子加上边框：

div{
   width: 100px;
   height: 100px;
   border: 1px solid black;
}

将他的宽高设为0，边框的大小加大：

div{
   width: 0px;
   height: 0px;
   border: 20px solid black;
}

图中的颜色全是边框
对每一边设置不同的颜色：

div{
   width: 0px;
   height: 0px;
   border: 20px solid black;
   border-top-color: red;
   border-left-color: yellow;
   border-right-color: blue;
   border-bottom-color: orange;
}

这样就有四个三角形 将不需要的边框设置为透明就可以了

div{
   width: 0px;
   height: 0px;
   border: 20px solid transparent;
   border-bottom-color: black;
}

如果加上盒子的宽高和旋转就可以变成箭头：

div{
   width: 20px;
   height: 20px;
   border: 5px solid transparent;
   border-bottom-color: black;
   border-left-color: black;
   transform: rotate(45deg);
}