css 制作三角形

使用边框属性制作三角形

通过设置元素的 border 属性可以创建三角形。将元素的宽度和高度设为 0，然后通过调整边框的宽度和颜色来实现不同方向的三角形。

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

调整边框方向控制三角形指向

通过调整边框的宽度和颜色，可以控制三角形的指向方向。例如，将 border-bottom 改为 border-top 可以让三角形朝下。

.triangle-down {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid blue;
}

制作直角三角形

通过只设置两个边框，可以创建直角三角形。例如，仅设置 border-left 和 border-bottom。

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

使用伪元素增强灵活性

通过结合伪元素（如 ::before 或 ::after），可以在不添加额外 HTML 元素的情况下生成三角形。

.element::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid black;
}

使用 clip-path 制作复杂三角形

对于更复杂的三角形形状，可以使用 clip-path 属性。通过定义多边形路径，可以精确控制三角形的形状。

.clip-triangle {
  width: 100px;
  height: 100px;
  background-color: purple;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

使用 transform 旋转方形元素

通过旋转一个方形元素，可以生成三角形。结合 overflow: hidden 可以隐藏不需要的部分。

.rotate-triangle {
  width: 100px;
  height: 100px;
  background-color: orange;
  transform: rotate(45deg);
  overflow: hidden;
}