用css画三角形网上一找一大堆，大多数都是使用border来画的，优点是简单，缺点是单调，那么今天我就来带大家使用css花式画三角形。
先睹为快：
jcode
使用border画三角形
.triangle-border {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #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来设置的，需要设置在父元素上。
总结
这里就简单的介绍了几种画三角形的方式，总要的是思路的扩展；
大家可以根据自己的需求来使用自己喜欢的方式来实现，同时可以尝试实现自己喜欢的样式，就比如我文中提到了很多的样式，大家都可以自己尝试一下；
例如给三角形加一个边框可以用那些方式实现呢？如下：
