纯CSS绘制三角形（各种角度）

正三角形

.triangle {
    width: 0;
    height: 0;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-bottom: 40px solid pink;
}

效果图：

倒三角形

.triangle {
    width: 0;
    height: 0;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-top: 40px solid pink;
}

效果图：

左侧三角形

.triangle {
    width: 0;
    height: 0;
    border-top: 40px solid transparent;
    border-left: 40px solid pink;
    border-bottom: 40px solid transparent;
}

效果图：

右侧三角形

.triangle {
    width: 0;
    height: 0;
    border-top: 40px solid transparent;
    border-right: 40px solid pink;
    border-bottom: 40px solid transparent;
}

效果图：

左上角

.triangle {
   width: 0;
    height: 0;
    border-top: 40px solid pink;
    border-right: 40px solid transparent;
}

效果图：

右上角

.triangle {
   width: 0;
    height: 0;
    border-top: 40px solid pink;
    border-left: 40px solid transparent;
}

效果图：

左下角

.triangle {
   width: 0;
    height: 0;
    border-bottom: 40px solid pink;
    border-right: 40px solid transparent;
}

效果图：

右下角

.triangle {
   width: 0;
    height: 0;
    border-bottom: 40px solid pink;
    border-left: 40px solid transparent;
}

效果图：

 .triangle {
    position: absolute;
    top: -14rpx;
    left: calc(50% - 16rpx);
    width: 0rpx;
    height: 0rpx;
    border-left: 30rpx solid #242424;
    border-top: 30rpx solid transparent;
    border-radius: 0 10rpx 0 10rpx;
    transform: rotateZ(135deg);
}

效果图：

来源链接：www.jb51.net/article/425…