css 三角形

先来看一组元三角形

.triangle {
  width: 0px;
  height: 0px;
  border-top: 100px solid red;
  border-right: 100px solid salmon;
  border-bottom: 100px solid sandybrown;
  border-left: 100px solid violet;
}

去掉对立边(避免多余空间占位), 隐藏其中两边:

.triangle {
  width: 0px;
  height: 0px;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 100px solid sandybrown;
}

修改边大小:

.triangle {
  width: 0px;
  height: 0px;
  border-left: 50px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 50px solid sandybrown;
}

同理可得到以下方向的三角形:

另一组元三角形

分别以横纵向为主轴, 主轴保留一边, 偏轴保留一边, 就会得到如下元三角形

.chip1 {
  width: 0;
  height: 0;
  border-top: 100px solid red;
  border-left: 100px solid violet;
}
.chip2 {
  width: 0;
  height: 0;
  border-top: 100px solid red;
  border-right: 100px solid salmon;
}
.chip3 {
  width: 0;
  height: 0;
  border-bottom: 100px solid sandybrown;
  border-left: 100px solid violet;
}
.chip4 {
  width: 0;
  height: 0;
  border-bottom: 100px solid sandybrown;
  border-right: 100px solid salmon;
}

.chip1 {
  ...
  border-left: 100px solid transparent;
}
.chip2 {
  ...
  border-right: 100px solid transparent;
}
.chip3 {
  ...
  border-left: 100px solid transparent;
}
.chip4 {
  ...
  border-right: 100px solid transparent;
}

隐藏其中一边即可得到: