css 利用border实现三角形

1.我们先正常实现一个边框

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

2.再把边框的宽度增加到50px

可以看出，border其实并不是四条矩形边框组成的，是由四个三角形组合而成。

这里我们可以看作是中间的box盒子挡住了四个三角形的"角"。

3.将盒子的width，height调整为0

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

可以看出四个三角形。

4.实现一个三角形

我们保留一个边框的颜色，其余改成transparent就可以了，这样组合可以实现各种三角形。

.box {
  width: 0;
  height: 0;
  border: 50px solid;
  border-top-color: red;
  /* border-right-color: yellow;
  border-bottom-color: green;
  border-left-color: blue; */
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
}