CSS & JS Effect – 画三角形 Triangle

前言

画三角形有什么用?

可以做这样的 Design

参考

5 Ways To Create A Triangle With CSS

Border Triangle

用 border 做 三角形应该是最远古的招数了.

HTML

<div class="box"></div>

CSS

.box {
  border-style: solid;
  border-color: yellow blue pink red;
  border-width: 150px 100px 150px 100px;
  width: 0;
  height: 0;
}

效果

当只有 border 没有 width, height 的时候, border 是尖尖的.

红色 + 黄色区域就是一个 90° 的三角形. 我们只要把蓝色和粉色修改成 transparent 三角形就出现了.

border-color: yellow yellow transparent transparent;

效果

用 border 做三角形并不是一个很好的方案. 它不仅不直观, 更糟糕的是 border width 很难控制. 比如我想要 height 100% 它就做不了.

Linear Gradient Triangle

linear gradient 可以调角度. 所以也可以搞出三角形.

.box {
  width: 200px;
  height: 300px;
  background: linear-gradient(to bottom right, green 50%, transparent 50%);
}

效果

to bottom right 是渐变的方向. green 50% 表示 50% 以前都是纯绿色, 不要渐变. transparent 50% 表示从 50% 以后是纯 transparent.

所以看上去完全没有渐变的效果. 只是利用了它的角度而已.

这招比 border 好多了. 但还不是很直观. 有一种用 A 方法做出 B 效果的感觉.

Clip-path Triangle

clip-path 才是真确的方式. 三角形不就是四角形的一半吗? 那就 clip 丫

.box {
  width: 150px;
  height: 200px;
  background: green;
  clip-path: polygon(0% 0%, 0% 100%, 100% 0%);
}

polygon 是一个 point collection.

一共有 3 个 point

0% 0% 是坐标 X, Y

三个点连起来的地方要保留, 其余的 clip 掉. 这样三角形就出来了.

Image with Triangle

<img src="../images/tifa1.jpg" />

CSS

img {
  width: 500px;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
}

效果