三角形

使用纯CSS创建一个三角形形状。

  • 使用三个边框创建一个三角形形状。
  • 所有边框的border-width应该相同(20px)。
  • 三角形指向的相对边(即如果三角形指向下方,则为顶部)应具有所需的border-color。相邻的边(即左边和右边)应具有border-colortransparent
  • 改变border-width的值将改变三角形的比例。
<div class="triangle"></div>
.triangle {
  width: 0;
  height: 0;
  border-top: 20px solid #9C27B0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
}