应用border画三角形的基本原理

.triangle-border%20{
%20%20width:%200;
%20%20height:%200;
%20%20border-left:%2050px%20solid%20transparent;
%20%20border-right:%2050px%20solid%20transparent;
%20%20border-bottom:%20100px%20solid%20#000;
}

上边就采用了border来画了一个等腰三角形；

假如想要一个直角三角形，直接把border-bottom的颜色调整为transparent，随后随意挑选border-left或是border-right，向其设定最喜欢的颜色就可以。

.triangle-border {
  width: 0;
  height: 0;
  border-left: 50px solid #000;
  border-right: 50px solid transparent;
  border-bottom: 100px solid transparent;
}

方位不与口感，应用transform转动一下，在这里不去做演试。

应用border画三角形的基本原理在网上很多文章内容，有写得很详尽的，我这边就就做一个正确引导，大伙儿可以自己查看。

能够看见应用border画三角形的确很简易，我们只需调节border宽度和色彩就能绘制自己想要的三角形；

应用rotate画三角形

.triangle-rotate {
    position: relative;
    width: 200px;
    height: 100px;
    background-color: #000;
    border-radius: 8px;
}

.triangle-rotate::before {
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    width: 50px;
    height: 50px;
    background-color: #000;
    transform: translate(-50%, 50%) rotate(45deg);
    border-radius: 8px;
}

这种方法一般是用以一个元素里的装饰设计，例如上边的事例，一个汽泡上有一个小三角装饰设计；

这种方法的基本原理是采用rotate转动一个正方形，再将色彩和背景颜色设为一样，做一个视差实际效果，就能绘制一个三角形。

那样的好处是，我们可以用border-radius去画出圆弧的三角形，还可以应用box-shadow去画出带黑影的三角形。

.triangle-rotate {
    // ...
    border-radius: 8px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
}

.triangle-rotate::before {
    // ...
    border-radius: 0 0 0 8px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
}

也可以有外框，有颜色渐变，加一点动漫可以这么说实际效果特别棒：

.triangle-rotate {
    // ...
    background: linear-gradient(90deg, #770813, #A1151E, #CB272D, #F53F3F, #F76560, #F98A82, #FBB0A4, #FDD5C6, #FFF9E8);
}


.triangle-rotate::before {
    // ...
    background: linear-gradient(45deg, #4D000A, #A1151E);
    z-index: -1;
}

这里也只简易演试一下颜色渐变效果，大伙儿可以自己试着别的效果，由于颜色渐变必须调整一下视角，因此特意演试一下。

应用渐变色画三角形

.triangle-gradient {
    position: relative;
    width: 100px;
    height: 100px;
    background: linear-gradient(45deg, #000 50%, transparent 50%);
}

上边提到颜色渐变，这儿就要来演试一下渐变色画三角形的实际效果，渐变色画三角形的好处在于，在相同的范围之内，大家可以随意充分发挥，绘制各种各样精致的样式。

.triangle-gradient {
    background: 
            linear-gradient(45deg, transparent 50%, #fff 50%),
            linear-gradient(#FFECE8 25%, #FDCDC5 25%, #FBACA3 50%, #F98981 50%, #F76560 75%, #F53F3F 75%);
}

上边就很简单的整了一个阶梯性的渐变色三角形，大伙儿可以自己试着别的渐变色组成，还记得要把第一行的渐变色款式尽量放进第一行哦，下边就能够充分发挥了。

应用clip-path画三角形

.triangle-clip {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: #000;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

应用clip-path画三角形的好处在于不容易遮盖身后元素，以前的形式都是会遮盖身后元素，这种方法也就不会。

并且还有一个好处是能设黑影，上边的形式也能设黑影，可是黑影并不是三角形的：

.triangle-clip {
    position: relative;
    width: 100px;
    height: 100px;
    filter: drop-shadow(0 0 5px #000);
}

.triangle-clip::before {
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    width: 100%;
    height: 100%;
    background-color: #000;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

这儿就是采用filter来调整黑影，那样就能实现三角形的黑影了；

需注意这儿的dom结构是有所变化的，clip-path的三角形是放到::before伪元素里的，黑影是由drop-shadow来设定的，必须设在父元素上。

汇总

这里也简单介绍一下了几种画三角形的形式，总追求的是思维的拓展；

大伙儿可以根据实际情况来用你喜欢的方法来完成，与此同时可以试着完成你喜欢的款式，就比如说我原文中提及了不少的款式，大家都能自身尝试一下；

比如给三角形加一个外框可以使用这些方法完成呢？以下：