css三角形训练

在CSS中，如何制作三角形是一个常见的问题。本文将介绍一些训练制作CSS三角形的方法。

/* 利用 border 制作三角形 */
.triangle {
  width: 0;
  height: 0;
  border-top: 30px solid #007bff;
  border-right: 30px solid transparent;
}

/* 利用 transform 制作三角形 */
.triangle {
  width: 30px;
  height: 30px;
  background-color: #007bff;
  transform: rotate(45deg);
}

/* 利用伪元素制作三角形 */
.triangle {
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 30px solid #007bff;
  position: relative;
  margin: 0 auto;
}

.triangle::before {
  content: ';
  display: block;
  position: absolute;
  top: -30px;
  left: -15px;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 30px solid #007bff;
} 

以上三种方法都可以制作出三角形。使用 border 制作三角形最为简单，但有时需要借助 transform 来旋转角度；利用伪元素制作三角形稍微麻烦一些，但可以制作出更加复杂的形状。

训练制作三角形的过程中，不仅要熟练掌握 CSS 的语法和属性，还需要灵活运用思维，寻找到最优的解决办法。