css 梯形制作

使用 CSS 制作梯形的方法

方法一：利用 border 和透明边框
通过设置元素的 width 和 height 为 0，并利用 border 的透明属性创建梯形效果。例如，制作一个向右倾斜的梯形：

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

调整 border-left 和 border-right 的宽度可以改变梯形的倾斜角度。

方法二：使用 transform: skew()
通过 skew() 变形属性对矩形进行倾斜，生成梯形。例如：

.trapezoid {
  width: 200px;
  height: 100px;
  background-color: #e74c3c;
  transform: perspective(100px) skewX(-20deg);
}

perspective 可控制透视效果，skewX 或 skewY 决定倾斜方向。

方法三：CSS clip-path 裁剪
直接使用 clip-path 定义梯形的顶点坐标，实现更灵活的梯形：

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

调整 polygon 的百分比参数可自定义梯形的形状和倾斜方向。

注意事项

• border 方法适合简单梯形，但内容区域会因 height: 0 受限。
• clip-path 兼容性较好（现代浏览器支持），且允许元素内包含内容。
• 若需响应式设计，使用百分比单位替代固定值。