css3制作三角形

CSS3 制作三角形的方法

使用 CSS3 的 border 属性可以轻松创建三角形，无需图片或 SVG。以下是具体实现方法：

基本原理
通过设置元素的宽高为 0，利用 border 的透明部分和实色部分组合形成三角形。

示例代码
创建一个朝下的三角形：

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

不同方向的三角形

• 朝上：

  .triangle-up {
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid #00ff00;
  }

• 朝左：

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

• 朝右：

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

注意事项

1. 调整 border-width 的值可以改变三角形的大小和比例。
2. 通过组合不同方向的边框，可以创建更复杂的形状（如梯形）。
3. 此方法兼容主流浏览器，包括 IE8+。

高级应用
通过伪元素（::before 或 ::after）结合定位，可以在其他元素上添加三角形装饰，例如对话框的气泡提示。