CSS 绘制三角形的六种方法

1. 设置不同颜色的 border

<div class="block"></div>

.block {
    display: inline-block;
    height: 0;
    width: 0;
    border-top: 50px solid yellowgreen;
    border-bottom: 50px solid transparent;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
}

2. linear-gradient() 线性渐变

1. linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。
2. 通过旋转 rotate 或者 scale，就能得到各种角度

.block {
    display: inline-block;
    height: 100px;
    width: 100px;
    /* 从左下到右上，从蓝色开始渐变、到50%位置是透明色渐变开始、最后以透明色结束 */
    background: linear-gradient(45deg, blue, blue 50%, transparent 50%, transparent 100%);
    /* 或者： background: linear-gradient(to right top, blue, blue 50%, transparent 50%, transparent 100%); */
}

3. conic-gradient() 锥形渐变

.block {
    display: inline-block;
    height: 100px;
    width: 100px;
    /* 绘制圆心在（0, 0），绘制起点在90度，从蓝色开始绘制到45度的位置，从45.1度开始绘制透明色 */
    background: conic-gradient(from 90deg at 0 0, blue 0, blue 45deg, transparent 45.1deg);
}

4. 旋转 transform: rotate

.block {
    display: inline-block;
    height: 100px;
    width: 141px;
    position: relative;
    overflow: hidden;
}

.block::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: blue; 
    /* 旋转原点在(0, 0），旋转90度 */
    transform-origin: 0 0;
    transform: rotate(45deg);
}

5. clip-path 使用裁剪创建元素的可显示区域

.block {
    display: inline-block;
    height: 100px;
    width: 100px;
    background: blue;
    /* polygon 定义多边形， ()里面的每对参数表示多边形的顶点坐标（X,Y），也就是连接点 */
    clip-path: polygon(0 0, 100% 0, 0 100%, 0 0);
}

6. 使用特殊字符绘制三角形

◄ : ◄ 
► : ► 
▼ : ▼ 
▲ : ▲
⊿ : ⊿
△ : △

<div class="block">&#9650</div>

.block {
    font-size: 100px;
    color: blue;
}

注意：该方法呈现的三角形效果与当前浏览器所安装的字体相关，所以，慎用。

参考: https://github.com/chokcoco/iCSS