css3制作三角形

使用 CSS3 制作三角形

通过 CSS3 的边框属性（border）可以轻松实现三角形效果。核心原理是利用边框的透明和实色组合。

基础三角形实现

设置一个宽度和高度为 0 的元素，通过边框属性生成三角形：

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

此代码会生成一个红色的等边三角形，方向朝上。通过调整边框的宽度和颜色可以控制三角形的大小和方向。

不同方向的三角形

通过调整边框的显示和隐藏，可以生成不同方向的三角形：

朝下的三角形

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

朝左的三角形

.triangle-left {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-right: 100px solid #0000ff;
}

朝右的三角形

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

斜边三角形

通过不对称设置边框宽度，可以生成斜边三角形：

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

使用伪元素优化

结合伪元素可以避免额外的 HTML 元素：

.element::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #ffffff;
}

注意事项

• 边框宽度决定三角形的大小，颜色决定填充色。
• 透明边框（transparent）用于隐藏不需要的部分。
• 现代浏览器均支持此方法，包括 IE9+。
• 对于更复杂的形状，可组合多个三角形或使用 CSS clip-path 属性。