三角形用 CSS 该怎么画?那好看一点的三角形能画吗?

我正在参加「掘金·启航计划」

css画三角形网上一找一大堆,大多数都是使用border来画的,优点是简单,缺点是单调,那么今天我就来带大家使用css花式画三角形。

先睹为快:

使用border画三角形

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

image.png

上面就使用了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;
}

image.png

方向不和口味,使用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;
}

image.png

这种方式通常是用于一个元素上的装饰,比如上面的例子,一个气泡上有一个小三角装饰;

这种方式的原理是使用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);
}

image.png

还可以有边框,有渐变色,再加点动画可以说效果非常棒:

.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;
}

image.png

这里就只简单演示一下渐变色的效果,大家可以自行尝试其他的效果,因为渐变色需要调整一下角度,所以特地演示一下。

使用渐变色画三角形

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

image.png

上面说到渐变色,这里就来演示一下渐变色画三角形的效果,渐变色画三角形的好处是,在有限的范围内,我们可以任意发挥,画出各种精美的样式。

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

image.png

上面就简简单单的弄了一个阶梯式的渐变三角形,大家可以自行尝试其他渐变组合,记得要将第一行的渐变样式务必放到第一行哦,下面的就可以自由发挥了。

使用clip-path画三角形

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

image.png

使用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%);
}

image.png

这里就是使用filter来设置阴影,这样就可以实现三角形的阴影了;

需要注意的是这里的dom结构是有变化的,clip-path的三角形是放在::before伪元素上的,阴影是通过drop-shadow来设置的,需要设置在父元素上。

总结

这里就简单的介绍了几种画三角形的方式,总要的是思路的扩展;

大家可以根据自己的需求来使用自己喜欢的方式来实现,同时可以尝试实现自己喜欢的样式,就比如我文中提到了很多的样式,大家都可以自己尝试一下;

例如给三角形加一个边框可以用那些方式实现呢?如下:

image.png