用CSS绘制任意三角形

原理

html结构：

<div class="triangle"></div>

设置样式：

.triangle {
  width: 100px;
  height: 100px;
  border-top: 100px solid red;
  border-right: 100px solid green;
  border-bottom: 100px solid blue;
  border-left: 100px solid yellow;
}

效果：

发现当border足够宽的时候，我们能明显看到相邻boder之间是有夹角的。而不是直角关系。那我们设置宽高为0，又会怎么样呢？

设置样式：

.triangle {
  width: 0;
  height: 0;
  border-top: 100px solid red;
  border-right: 100px solid green;
  border-bottom: 100px solid blue;
  border-left: 100px solid yellow;
}

效果：

发现了一个由四个等腰直角三角形拼起来的正方形。要是我们设置三个边为透明，就能实现一个等腰直角三角形了！

等边三角形

仅仅上面的代码显然不能帮助我们实现任意三角形，我们以实现等边三角形作为基础的列子来理解任意三角形。
如果我们去除了上边框，设置样式：

.triangle {
  width: 0;
  height: 0;
  /* border-top: 100px solid red; */
  border-right: 100px solid green;
  border-bottom: 100px solid blue;
  border-left: 100px solid yellow;
}

效果：

 为什么左边和右边的边框都被砍去了一半？

如果我们去除了上下边框呢，设置样式：

.triangle {
  width: 0;
  height: 0;
  /* border-top: 100px solid red; */
  border-right: 100px solid green;
  /* border-bottom: 100px solid blue; */
  border-left: 100px solid yellow;
}

效果：

一片空白，啥也没有了，其实并不是，检查属性：

我们可以猜测：三角形的斜边的长度 = 相邻两个外边距的宽度之和。

当不设置上边框的时候，也是能符合这个定律的。
那就好办了，等边三角形的的边定下来了（定为a=200），我们只要求高（边框的宽即可）。
按照公式 h = √3/2a

算出 h = 173.2

设置样式：

.triangle {
  width: 0;
  height: 0;
  border-top: 100px solid red;
  border-right: 100px solid green;
  border-bottom: 100px solid blue;
  border-left: 173.2px solid yellow;
}

效果：

黄色的部分就是一个等边三角形了。把其他的边距设置为透明，即可。
至此，基于上面的这个猜测：

三角形的斜边的长度 = 相邻两个外边距的宽度之和。
还可知：垂线与底边的交点与相邻外边距的宽度有关。

我们就能画出任意形状的三角形啦。

画箭头

画箭头的原理更加简单，只要绘制两个三角形，一个覆盖在领一个上面，偏移相对的几个像素，就能绘制出一个箭头啦。

---

关注我：kuckboy