css实现三角形

前言

学习前台一直会遇到三角形的问题。现在记录下来下次方便查找。

.sanjiaoxing {
    height: 0;
    width: 0;
    border-left: 10px solid transparent;   /*transparent为透明*/
    border-right: 10px solid transparent;
    border-bottom: 10px solid red;
}

 效果图如下：

ps: 黑色为背景颜色。

 

更多内容参考：https://www.jianshu.com/p/1f32120a503b