CSS 三角形详解

[toFrankie]

本文将会详细介绍如何使用纯 CSS 实现各种三角形。文末会推荐一个在线工具。

了解边框

我们知道，任何 HTML 元素其实都是一个矩形的盒子。通过以下 CSS 属性可以设置元素的四条边框：

• border-top
• border-right
• border-bottom
• border-left

话不多说，先看示例：

<!-- 为了方便截图，父元素宽度设置为 300px -->
<div class="rect">some text...</div>

.rect {
  border-top: 30px solid red;
  border-right: 30px solid green;
  border-bottom: 30px solid blue;
  border-left: 30px solid orange;
}

接着，我们把 div 的文本干掉，再看下效果：

<div class="rect"></div>

由于 div 是块级元素，它默认占满父元素的宽度（截图中父元素宽度为 300px）。

然后，我们把 div 的 width 和 height 均设为 0，再看下效果：

.rect {
  width: 0;
  height: 0;
  border-top: 30px solid red;
  border-right: 30px solid green;
  border-bottom: 30px solid blue;
  border-left: 30px solid orange;
}

到这里，我想你应该知道如何设置各种形状的三角形了，最起码思路是有了。

只要把边、边框背景组合一下，就能实现各种形状了。

直觉性误区

假设我们要做一个左下边（橙蓝）组成的直角三角形，那是不是只要把右上（绿红）的边框干掉就行？

.rect {
  width: 0;
  height: 0;
  /* border-top: 30px solid red; */
  /* border-right: 30px solid green; */
  border-bottom: 30px solid blue;
  border-left: 30px solid orange;
}

这似乎不是我们想要的结果哦！换个思路，把右上的边框颜色设为透明（transparent）呢？

.rect {
  width: 0;
  height: 0;
  border-top: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 30px solid blue;
  border-left: 30px solid orange;
}

这才是我们想要的结果。

我们来分析下原因：

由于我们将 div 的 width 和 height 均设为 0，那么它就靠 border 来撑开空间了。其中「水平方向」靠 border-left、border-right 来撑开，「垂直方向」靠 border-top、border-bottom 来撑开。所以设置四条边为 30px 的时候，它占用了 60 × 60 的空间。一旦我们干掉了上边框和右边框，它实际只占了 30 × 30 的空间，即右下角的部分。

基础三角形

本文不会一一列举各种形状的示例，道理是相通的，自由组合即可。

如果要实现以下这个直角三角形，有多少种做法呢？

我们做个辅助线，就很清晰了。

共有三种方式可实现：橙色 + 红色、二分之一橙色、二分之一红色。为了方便举例，以下示例不设为相同的颜色，实现需求形状即可，大小也请自行调整。

橙色 + 红色

四条边均不能省略，其中 border-top 和 border-left 设为相同的颜色，border-right 和 border-bottom 设为透明色。

.rect {
  width: 0;
  height: 0;
  border-top: 30px solid red;
  border-right: 30px solid transparent;
  border-bottom: 30px solid transparent;
  border-left: 30px solid orange;
}

二分之一橙色

不设置 border-top 和 border-right 两条边。boder-bottom 设为透明色，border-left 设置背景色。

.rect {
  width: 0;
  height: 0;
  border-bottom: 30px solid transparent;
  border-left: 30px solid orange;
}

二分之一红色

不设置 border-left 和 border-bottom 两条边。boder-right 设为透明色，border-top 设置背景色。

.rect {
  width: 0;
  height: 0;
  border-top: 30px solid red;
  border-right: 30px solid transparent;
}

特殊三角形

有时候可能要实现等腰三角形、等边三角形等。道理很简单，无非就是按要求先把宽高计算出来，然后设置对应边的 border-width 即可。

平时工作当然要善用工具了，比如 CSS triangle generator：

既能选择各种形状，也能输入设置宽高，那还用得着自己计算呢，对吧。

2024.02.01 更新，上述工具链接已失效，其他更多选择 👇

• CSS Triangle Generator（拖拽、更多形状支持）
• CSS Triangle Generator（常见形状支持）

总结

使用 CSS 来画三角形，无非就是将元素的宽高设为 0，然后将四条边自由组合就能画出各种形状。较为麻烦的是，特殊三角形宽高需计算，但已经有工具在帮我们做这件事了，所以非常轻松就能完成了。

The end.