css 制作梯形
使用 CSS 制作梯形
CSS 可以通过 clip-path 或 transform 属性实现梯形效果。以下是几种常见方法：
使用 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() 模拟梯形效果：
.trapezoid {
width: 200px;
height: 100px;
background-color: #e74c3c;
position: relative;
}
.trapezoid::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
transform: perspective(100px) rotateX(10deg);
background-color: inherit;
}- 利用
perspective和rotateX模拟 3D 倾斜效果。 - 调整
rotateX的角度值控制梯形的倾斜程度。
使用边框技巧
通过透明边框和宽度调整生成梯形：
.trapezoid {
width: 120px;
height: 0;
border-bottom: 100px solid #2ecc71;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
}border-bottom定义梯形高度和颜色。border-left和border-right的宽度决定梯形的倾斜度。
注意事项
clip-path的兼容性较好，但需注意旧版本浏览器的支持。transform方法可能影响子元素的布局。- 边框技巧适合单色梯形，无法添加复杂背景。
