css 制作梯形

使用 CSS 制作梯形的方法

使用 border 属性实现梯形

通过调整元素的 border 宽度和颜色，可以创建梯形效果。将元素的宽度和高度设为 0，然后通过不同方向的 border 宽度差异形成梯形。

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

这种方法通过不对称的 border 宽度实现梯形效果。调整 border-left 和 border-right 的宽度可以改变梯形的倾斜角度。

使用 transform 属性实现梯形

通过 transform: skew() 或 perspective 属性可以更灵活地创建梯形效果。

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

perspective 和 rotateX 结合可以模拟 3D 倾斜效果，形成梯形。调整 rotateX 的角度可以改变梯形的倾斜程度。

使用 clip-path 属性实现梯形

clip-path 可以通过定义多边形路径直接裁剪出梯形形状，是最直观的方法之一。

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

clip-path 的 polygon 函数通过四个顶点坐标定义梯形形状。调整百分比值可以改变梯形的上底和下底比例。

使用伪元素实现梯形

通过伪元素和 transform 结合，可以在不破坏元素内容的情况下实现梯形效果。

.trapezoid {
  position: relative;
  width: 200px;
  height: 100px;
}

.trapezoid::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #3498db;
  transform: perspective(100px) rotateX(10deg);
}

这种方法适合需要在梯形内放置内容的场景，因为伪元素的变形不会影响主元素的内容。

方法对比

• border 方法：简单但灵活性较低，适合纯色梯形。
• transform 方法：支持渐变和背景图，但可能影响子元素。
• clip-path 方法：灵活性最高，支持复杂形状，但兼容性稍差。
• 伪元素方法：内容与样式分离，适合动态内容场景。

根据需求选择合适的方法，clip-path 是现代 CSS 中最推荐的方式。