从解析border，到轻松用CSS画三角形

今天总结一下CSS画三角形的画法，总的来说就是border的巧妙运用，在这之前，我们要先了解border。

关于border那点小秘密

我们平时使用的时候，如果只显示一边的border，是这样的

image.png

非常和谐，but.....

当我设置了其他边的边框但是显示为透明时

image.png

上边框变成梯形了！这是怎么回事？

其实是因为top( top就是border-top，下文皆用此方法表述 )和left还有right部分有重合的地方！

在未设置left和right的时候便不会有此问题，top妥妥的矩形，若都设置了只能相交部分平分一半了，下面举个更清晰的例子就更好理解了。

image.png

四边border的位置，很明显了对不对？接下来就可以画三角形了。

CSS画三角形

1. 等腰三角形

将div的宽度设为0，高度默认就是0
统一设置border，并全部透明显示

  border: 50px solid transparent;

根据所需三角形旋转的情况单独设置任一边的颜色，如下：

image.png

image.png

2. 等腰直角三角形

第一二步和上面一样，第三步只要将任意两个相邻边的颜色设置出来就好了( 正方形切一半肯定是等腰直角三角形这个应该不用说了吧 )

image.png

2. 等边三角形

需要注意的是，等边三角形单独设置的border宽度必须设为统一设置的border宽度的两倍（数学知识，想想就明白了）

image.png

3. 自己画一个小箭头

核心是将两个三角形重叠，底部的三角形露出一点，显示成箭头

#arrow::before {
  content: '';
  border: 10px solid transparent;
  border-right-color: red;
  position: absolute;
  right: 100%;
  top: 20%;
}
#arrow::after {
  content: '';
  border: 10px solid transparent;
  border-right-color: white;
  position: absolute;
  right: 100%;
  margin-right: -1.5px;
  top: 20%;
}

大概是这样的：

image.png