css制作页面锯齿
使用 CSS 制作页面锯齿效果
方法一：使用 clip-path 属性
通过 clip-path 可以创建自定义的裁剪路径，实现锯齿边缘效果。以下是一个示例代码：
.sawtooth {
width: 100%;
height: 100px;
background-color: #3498db;
clip-path: polygon(
0% 0%,
100% 0%,
100% 70%,
50% 100%,
0% 70%
);
}polygon函数定义了多个点，形成锯齿形状。- 调整百分比可以改变锯齿的大小和密度。
方法二：使用伪元素和 linear-gradient
通过伪元素和渐变背景可以模拟锯齿效果：
.sawtooth-gradient {
position: relative;
height: 100px;
background-color: #e74c3c;
}
.sawtooth-gradient::after {
content: "";
position: absolute;
bottom: -10px;
left: 0;
width: 100%;
height: 20px;
background: linear-gradient(
45deg,
#e74c3c 25%,
transparent 25%
), linear-gradient(
-45deg,
#e74c3c 25%,
transparent 25%
);
background-size: 20px 20px;
}- 伪元素通过两个倾斜的渐变背景拼接出锯齿形状。
- 调整
background-size可以改变锯齿的密度。
方法三：使用 SVG 作为背景
SVG 可以精确控制锯齿形状，适合复杂需求：
.sawtooth-svg {
width: 100%;
height: 100px;
background-color: #2ecc71;
mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 10" preserveAspectRatio="none"><path d="M0,0 L100,0 L100,5 L50,10 L0,5 Z" fill="white"/></svg>');
mask-size: 100% 100%;
}- SVG 路径定义了锯齿形状。
mask-image将 SVG 作为遮罩应用。
方法四：使用重复背景图像
通过小尺寸的锯齿图像平铺实现效果：
.sawtooth-repeat {
width: 100%;
height: 100px;
background-color: #9b59b6;
background-image: url('sawtooth-pattern.png');
background-repeat: repeat-x;
background-position: bottom;
}- 需要提前准备好锯齿图案的图片文件。
repeat-x使图案水平重复。
注意事项
clip-path的兼容性较好，但旧版本浏览器可能需要前缀。- 渐变方法适合简单锯齿，复杂形状可能需要调整角度。
- SVG 方法灵活性最高，适合响应式设计。
以上方法可以根据具体需求选择，组合使用可以实现更丰富的效果。
