css 制作梯形

使用 CSS 制作梯形

通过 CSS 的 transform 属性和 perspective 属性可以创建梯形效果。以下是几种常见方法：

使用 transform: skew()

通过倾斜元素的一侧来模拟梯形效果：

.trapezoid {
  width: 200px;
  height: 100px;
  background: #3498db;
  transform: perspective(100px) rotateX(10deg);
}

使用 border 模拟

利用透明边框和宽度调整实现梯形：

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

使用 clip-path

通过裁剪路径直接定义梯形形状：

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

注意事项

• transform 方法可能影响子元素的布局。
• border 方法适合纯色背景，内容无法嵌入。
• clip-path 兼容性较好，但需检查浏览器支持情况。

根据需求选择合适的方法，clip-path 通常是最灵活的选择。