当前位置：首页 > CSS

css怎么制作梯形

2026-03-12 12:45:26CSS

使用 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-left 和 border-right 的宽度可以改变梯形的倾斜角度。

使用 `clip-path` 属性

clip-path 可以直接裁剪元素为梯形，通过定义多边形的顶点坐标实现更灵活的梯形形状。

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

修改 polygon 的百分比参数可以调整梯形的上底和下底比例。

通过 `transform` 倾斜元素

使用 transform: skew() 对矩形进行倾斜，配合 overflow: hidden 和子元素的反向倾斜实现梯形。

.parent {
  width: 200px;
  height: 100px;
  overflow: hidden;
}
.child {
  width: 100%;
  height: 100%;
  background: #3498db;
  transform: skewX(-20deg);
}

调整 skewX 的角度值可以改变梯形的倾斜程度。

结合伪元素

通过伪元素生成倾斜部分，与主元素拼接形成梯形。

css怎么制作梯形

.trapezoid {
  position: relative;
  width: 200px;
  height: 100px;
  background: #3498db;
}
.trapezoid::before {
  content: '';
  position: absolute;
  top: 0;
  left: -20px;
  width: 40px;
  height: 100%;
  background: #3498db;
  transform: skewX(20deg);
}

调整伪元素的宽度和 skewX 角度可以控制梯形的形状。