如何用 CSS3 绘制三角形和梯形？

CSS3通过border属性配合尺寸控制和透明边框可实现三角形与梯形绘制。以下是核心方法及代码示例：

---

三角形绘制原理

利用元素宽高为0和border对称透明实现，原理基于盒子模型边框的斜切边界：

1. 宽高设为零：强制元素内容区域消失，仅显示边框拼接部分。
2. 单边实体色，三边透明：
   • 向上三角形：上边框为实体色，左右下透明
   • 向右三角形：右边框为实体色，上下左透明

基础三角形实现

.triangle-up {
  width: 0;
  height: 0;
  border-left: 20px solid transparent;    /* 左透明 */
  border-right: 20px solid transparent;   /* 右透明 */
  border-bottom: 40px solid red;         /* 向上三角形 */
}

可调方向：

• 向下：用border-top实体色
• 向左：用border-left实体色（左右透明交换位置）

---

梯形绘制方法

方法1：单元素透明边界（无需伪元素）

核心是设置元素的部分宽高与斜边透明边界：

.trapezoid {
  width: 200px;       /* 顶边宽度 */
  height: 0;          /* 高度为0 */
  border-bottom: 100px solid blue;   /* 梯形高度及底部颜色 */
  border-left: 50px solid transparent;   /* 左斜边 */
  border-right: 50px solid transparent;  /* 右斜边 */
}

效果为正梯形，透明斜边宽度控制倾斜角度。

方法2：Skew形变伪元素

更灵活的方式是通过伪元素倾斜变换生成：

.trapezoid-flex {
  position: relative;
  height: 100px;
}
.trapezoid-flex::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: green;
  transform: perspective(100px) rotateX(45deg);  /* 透视控制变形效果 */
}

直接改变rotateX()控制梯形深度。

---

关键注意：

1. 所有方法需包裹元素的display属性支持定位（如inline-block或block）
2. 浏览器兼容性：现代浏览器（≥IE9）均支持