css 梯形制作

使用 CSS 制作梯形的方法

通过边框透明实现梯形

利用 CSS 的 border 属性，通过设置部分边框为透明色（transparent）来创建梯形效果。这种方法简单且兼容性好。

.trapezoid {
  width: 100px;
  height: 0;
  border-bottom: 50px solid #3498db;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
}

• width 控制梯形的上底宽度。
• border-bottom 定义梯形的高度和颜色。
• border-left 和 border-right 的宽度控制梯形的倾斜角度，设置为透明色以形成斜边。

使用 CSS 变换（transform）

通过 transform 属性中的 skew 或 perspective 实现更灵活的梯形效果。

.trapezoid-transform {
  width: 150px;
  height: 100px;
  background: #e74c3c;
  transform: perspective(200px) rotateX(30deg);
}

• perspective 定义 3D 空间的视距，值越小梯形倾斜效果越明显。
• rotateX 控制绕 X 轴的旋转角度，生成梯形侧面。

结合伪元素创建复杂梯形

通过伪元素（如 ::before 或 ::after）叠加实现非对称梯形。

.trapezoid-complex {
  position: relative;
  width: 120px;
  height: 60px;
  background: #2ecc71;
}

.trapezoid-complex::before {
  content: "";
  position: absolute;
  top: 0;
  left: -20px;
  border-right: 20px solid #2ecc71;
  border-top: 60px solid transparent;
}

• 主元素定义梯形主体。
• 伪元素通过边框透明实现斜边，left 负值控制斜边偏移。

使用 clip-path 自定义形状

现代浏览器支持 clip-path，可直接定义梯形路径，灵活性高。

.trapezoid-clip {
  width: 160px;
  height: 80px;
  background: #9b59b6;
  clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
}

• polygon 的四个顶点坐标依次为：左上、右上、右下、左下。
• 调整百分比值可改变梯形的倾斜方向和比例。

注意事项

• 边框透明法需注意 height: 0，实际高度由边框宽度决定。
• clip-path 的兼容性较差，需检查目标浏览器支持情况。
• 梯形内部若需放置内容，建议使用 transform 或 clip-path 方法。