CSS 画三角形原理解析用css画图最常见的一种形状。三角形切图，不存在的。这里要注意的一个点是border-widt

等边三角形

用css画图最常见的一种形状。三角形切图，不存在的。代码

.demo {
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0px 25px 43px 25px;
    border-color: transparent transparent rgb(245, 129, 127) transparent;
}

有趣的基础

先来看最简单的border，这个真是个平平无奇border呀

.demo {
    width:100px;
    height:100px;
    border:1px red solid;
    border-color: red blue red blue; 
}

但是如果我们加粗后，它就变得有意思起来

.demo {
    width:100px;
    height:100px;
    border:30px red solid;
    border-color: red blue red blue; 
}

请注意边角的交界处，人家可是谁也不让着谁，斜边平分哦

3.如果我们把width和height都设置为0，嘿，可以看到大家为了抢地盘，遵循公平公正的原则平分、占满了整个框框

.demo {
    width:0px;
    height:0px;
    border:30px red solid;
    border-color: red blue red blue;
}

到这里，我们已经可以画出一个三角形啦~ 原理很简单，咱们把其中三个边的颜色设置为透明的就好啦：像这样只留上边框：

.demo {
    width:0px;
    height:0px;
    border:30px red solid;
    border-color: red transparent transparent transparent;
}

像这样只留右边框：

.demo{
    width:0px;
    height:0px;
    border:30px red solid;
    border-color: transparent red  transparent transparent;
}

像这样只留下边框：

.demo{
    width:0px;
    height:0px;
    border:30px red solid;
    border-color: transparent transparent red transparent; 
}

像这样只留左边框

.demo{
    width:0px;
    height:0px;
    border:30px red solid;
    border-color: transparent transparent  transparent red; 
}

想留哪边留哪边，so easy~

回归初心

回到最初 border-width: 0px 25px 43px 25px; 43px是怎么来的呢？我们给每个border-color上个荧光色

.demo{
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0px 25px 43px 25px;
    border-color: red blue yellow pink; 
}

这里要注意的一个点是border-width是边框的宽度，不是div的宽度。pink部分的宽度是25，blue部分的宽也是25推出：三角形的求边长为50的等边三角形的高。我们可以用勾股定理

50*50 - 25*25 开根号约等于 43

把上左右的颜色都设置成透明色，我们就能得到一个可爱的等边三角形了

.demo{
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0px 25px 43px 25px;
    border-color: transparent transparent yellow transparent; 
}

扩展

如果只设置一个边呢？不好意思只剩一个边，或者不相交的两边呢？不好意思，不抢地盘了，咱收缩了，啥也没有

.demo{
    width: 30px;
    height: 0px;
    border-style: solid;
    border-width: 0px 25px 0px 25px;
    border-color: red red red  red; 
}

应用在对话框里：其实是2个三角形覆盖的结果

代码

.demo {
    width: 200px;
    line-height: 100px;
    background-color: #fff;
    position: relative;
    border: 1px solid #5BBF5A;
    text-align: center;
    font-size: 25px;
}
 
.demo:after, .demo:before {
    border: solid transparent;
    content: ' ';
    width: 0;
    height:  0;
    position: absolute;
}
 
.demo:after {
    border-width: 10px;
    border-top-color: #fff;
    top: 100px;
    left: 150px;
}
 
.demo:before {
    border-width: 11px;
    border-top-color: #5BBF5A;
    top: 100px;
    left: 149px;
}

看不懂原理，没关系，我给你加个荧光色，你就懂了,抢地盘原理不赘述，然后是黄色的上边框覆盖了红色的上边框，同时留了1px的边边。

.demo {
    width: 200px;
    line-height: 100px;
    background-color: #fff;
    position: relative;
    border: 1px solid #5BBF5A;
    text-align: center;
    font-size: 25px;
}
 
.demo:after, .demo:before {
    border: solid transparent;
    content: ' ';
    width: 0;
    height:  0;
    position: absolute;
}
.demo:after {
    border-width: 10px;
    border-top-color: yellow;
    top: 100px;
    left: 150px;
}
 
.demo:before {
    border-width: 11px;
    border-top-color: red;
    top: 100px;
    left: 149px;
}

强调标志：上边框宽为0，不和右边抢地盘，形成了右边的直角。右边框宽25px，下边框25px，右边框和下边框抢地盘，由于下边框是透明色，所以剩下了右边的三角形。

.demo {
    width: 30px;
    height: 0px;
    border-style: solid;
    border-width: 0px 25px 25px 0px;
    border-color: transparent red transparent  transparent; 
}