纯CSS实现三角形

1. 使用border属性实现三角形

（1）HTML结构

<div></div>

（2）CSS样式

        div {
            width: 0;
            height: 0;
            border: 100px solid;
            border-top-color: skyblue;
            border-right-color: pink;
            border-bottom-color: yellow;
            border-left-color: orange;
        }

(3)效果图

（4）单个三角形

如果想要一个指向下面的三角形，可以让 border 的上边可见，其他边都设置为透明：

 div {
            width: 0;
            height: 0;
            border: 100px solid;
            border-top-color: skyblue;
            border-right-color: transparent;
            border-bottom-color: transparent;
            border-left-color: transparent;
        }