css绘制三角形及应用

---

一、绘制简单三角形

首先，当我们对一个没有固定宽高的盒子设置四个不同颜色的边框时，会出现如下图所示效果。

代码如下：

<style>
        .box {
   
            width: 0;
            height: 0;
            border-top: 100px solid pink;
            border-left: 100px solid green;
            border-bottom: 100px solid blue;
            border-right: 100px solid gold;
            margin: 200px auto;
        }
    </style>

由图可知，其实每条边框的本质是一个三角形，因此，如果我们想要获得一个三角形，则可以将其他三个边框的颜色设为透明色transparent。

<style>
        .box {
   
            width: 0;
            height: 0;
            border-top: 100px solid pink;//只保留top的颜色
            border-left: 100px solid transparent;
            border-bottom: 100px solid transparent;
            border-right: 100px solid transparent;
            margin: 200px auto;
        }
    </style>

通过修改颜色，我们就可以得到一个朝下的三角形：