css 制作梯形

使用 CSS 制作梯形

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

使用 transform: perspective() 和 rotateX()

通过 3D 变换模拟梯形效果，适合需要倾斜角度的场景：

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

使用 border 绘制透明边框

通过设置透明边框和宽度调整实现梯形，兼容性较好：

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

使用 clip-path 直接裁剪

现代浏览器推荐方案，可自定义任意角度的梯形：

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

注意事项

• border 方法需注意高度通过 border-width 控制，内容区域为 0
• clip-path 的坐标顺序影响梯形方向，按顺时针或逆时针定义顶点
• 3D 变换可能导致子元素继承透视效果

梯形方向调整

修改参数可实现不同方向的梯形：

/* 向右倾斜 */
clip-path: polygon(0% 0%, 80% 0%, 100% 100%, 20% 100%);

/* 向上收缩 */
clip-path: polygon(20% 100%, 80% 100%, 100% 0%, 0% 0%);

以上方法可根据项目需求选择，clip-path 方案最灵活但需考虑浏览器支持。