用css画三角形

原理

利用border的特性。

备注

一般情况下，此类三角形都属于小icon类型，所以基本上都是使用::before/::after等伪元素来实现。

实例

例1：

triangle1.png

//css
.triangle1-1{
    width: 0;
    border-left: 80px solid blue;
    border-bottom: 80px solid red;
}
.triangle1-2{
    width: 0;
    border-left: 80px solid blue;
    border-bottom: 80px solid transparent;
}
//html
<div class="triangle1-1"></div>
<div class="triangle1-2"></div>

例2：

triangle2.png

//css
.triangle2-1{
    width: 0;
    border-width: 70px;
    border-style: solid;
    border-top-color: red;
    border-right-color: blue;
    border-bottom-color: green;
    border-left-color: purple;
}
.triangle2-2{
    width: 0;
    border: 70px solid transparent;
    border-top-color: red;
}
.triangle2-expand{
    width: 200px;
    height: 30px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    position: relative;
}
.triangle2-expand::before,
.triangle2-expand::after{
    content: '';
    border: 10px solid transparent;
    border-bottom-color: #ccc;
    position: absolute;
    top: -20px;
    left: 20px;
}
.triangle2-expand::after{
    border-bottom-color: #fff; /*此处色值要和背景色一致*/
    top: -19px;
}
//html
<div class="triangle2-1"></div>
<div class="triangle2-2"></div>
<div class="triangle2-expand"></div>