使用css 写三角形

思路：

border属性只是一种简写方式。
我们在平常开发中的写法是下面这样

    border: 20px solid red;

如果你换一种写法就是下面这样，但是实现的效果是相同的。

    border-top: 20px solid red;
    border-right: 20px solid red;
    border-left: 20px solid red;
    border-bottom: 20px solid red;

如果把四个方向的边框颜色写成不同的颜色，
你就会发现，它是这个样子。前提是div的宽高为0

所以，我们发现。

1. border-top,
2. border-left,
3. border-right,
4. bordre-bottom。

这四个属性，实质上就是矩形。
利用这个特性。就可以轻松使用border属性实现三角形。
通过border-width可以控制三角形大小。
还可以利用transform 属性来改变三角形的旋转角度。

.triangle{
    margin-top: 200px;
    margin-left: 200px;
    width: 0px;
    height: 0px;
    border-top: 20px solid slateblue;
    border-right: 20px solid #fff;
    border-left: 20px solid #fff;
    border-bottom: 20px solid #fff;
}