CSS 实现等边三角形

Question

<div class="equilateral-triangle"></div>
<div class="right-angle-triangle"></div>

.equilateral-triangle {
  width: 0;
  height: 0;
  border: 100px solid transparent;
  border-top: none;
  border-bottom-color: #ccc;
}
.right-angle-triangle {
  width: 0;
  height: 0;
  border: 100px solid transparent;
  border-bottom-color: #ccc;
  border-left: none;
}

在线预览：https://www.wenjiangs.com/runcode?slug=XnokSIEd

总结

1. 使用 border 实现三角形，width、height 设置为0
2. 设置颜色和设置为 none 的两边， 相邻时为直角三角形，相对时为等边三角形