css制作斜边
使用 CSS 制作斜边效果
使用 clip-path 属性
clip-path 可以通过多边形路径裁剪元素，实现斜边效果。以下代码示例创建一个顶部斜边：
.element {
clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 100%);
}调整百分比参数可控制斜边角度和方向。支持多种形状路径，如 circle、ellipse 等。
使用 transform: skew()
通过倾斜变换实现斜边视觉效果：
.container {
overflow: hidden;
}
.skewed {
transform: skewY(-5deg);
height: 200px;
background: #3498db;
}需配合外层容器隐藏溢出部分。适合需要整体倾斜的场景。
使用伪元素 + 旋转
通过伪元素和旋转创建局部斜边：
.element {
position: relative;
overflow: hidden;
}
.element::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 20px;
background: white;
transform: rotate(-2deg);
transform-origin: 100% 0;
}此方法可精确控制斜边位置和大小。
使用 CSS 渐变
线性渐变模拟斜边色块过渡：
.element {
background: linear-gradient(175deg, transparent 10%, #3498db 10%);
}适合简单的背景斜切效果，但不影响元素内容布局。
使用 SVG 裁剪
通过 SVG 定义裁剪路径：
<svg width="0" height="0">
<defs>
<clipPath id="diagonalClip">
<polygon points="0 20,100 0,100 100,0 100" />
</clipPath>
</defs>
</svg>
<div style="clip-path: url(#diagonalClip);"></div>适合需要复杂裁剪路径的场景，兼容性较好。
注意事项
clip-path的浏览器兼容性需关注，旧版本可能需要-webkit-前缀- 斜边角度计算建议使用工具辅助调试
- 内容溢出问题需通过
overflow: hidden控制 - 响应式设计中需使用百分比单位适应不同屏幕
