当前位置：首页 > CSS

css制作梯形

2026-02-26 21:58:35CSS

使用 CSS 制作梯形的方法

方法一：利用 `border` 属性

通过设置元素的 border 属性可以创建梯形效果。将元素的宽度和高度设为 0，然后通过调整不同方向的边框宽度和颜色来实现。

css制作梯形

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

border-bottom 定义梯形的底边高度和颜色。
border-left 和 border-right 设置为透明，形成斜边。

方法二：使用 `transform` 属性

通过 transform: skew() 或 perspective 属性对矩形进行倾斜变形，生成梯形效果。

css制作梯形

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

perspective 定义 3D 透视效果。
rotateX 沿 X 轴旋转元素，形成梯形。

方法三：使用 `clip-path` 属性

通过 clip-path 直接裁剪出梯形形状，灵活性较高。

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

clip-path: polygon() 通过定义多边形的顶点坐标裁剪元素。
调整百分比参数可控制梯形的倾斜度和形状。

方法四：伪元素叠加

通过伪元素生成倾斜的边框，模拟梯形效果。

.trapezoid {
  position: relative;
  width: 200px;
  height: 100px;
  background: #3498db;
}
.trapezoid::before {
  content: '';
  position: absolute;
  top: 0;
  left: -20px;
  border-right: 20px solid #3498db;
  border-bottom: 100px solid transparent;
}