css 制作梯形

使用 CSS 制作梯形

CSS 可以通过 clip-path 或 transform 属性实现梯形效果。以下是几种常见方法：

使用 clip-path 属性

clip-path 允许通过多边形裁剪元素形状。以下代码创建一个梯形：

.trapezoid {
  width: 200px;
  height: 100px;
  background-color: #3498db;
  clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
}

• polygon() 的四个点分别对应左上、右上、右下、左下顶点。
• 调整百分比可改变梯形的倾斜角度和宽度比例。

使用 transform 倾斜

通过 transform: skew() 模拟梯形效果：

.trapezoid {
  width: 200px;
  height: 100px;
  background-color: #e74c3c;
  position: relative;
}
.trapezoid::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform: perspective(100px) rotateX(10deg);
  background-color: inherit;
}

• 利用 perspective 和 rotateX 模拟 3D 倾斜效果。
• 调整 rotateX 的角度值控制梯形的倾斜程度。

使用边框技巧

通过透明边框和宽度调整生成梯形：

.trapezoid {
  width: 120px;
  height: 0;
  border-bottom: 100px solid #2ecc71;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
}

• border-bottom 定义梯形高度和颜色。
• border-left 和 border-right 的宽度决定梯形的倾斜度。

注意事项

• clip-path 的兼容性较好，但需注意旧版本浏览器的支持。
• transform 方法可能影响子元素的布局。
• 边框技巧适合单色梯形，无法添加复杂背景。