当前位置：首页 > CSS

css制作页面锯齿

2026-04-02 16:03:12CSS

使用 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 作为遮罩应用。

方法四：使用重复背景图像

通过小尺寸的锯齿图像平铺实现效果：

css制作页面锯齿

.sawtooth-repeat {
  width: 100%;
  height: 100px;
  background-color: #9b59b6;
  background-image: url('sawtooth-pattern.png');
  background-repeat: repeat-x;
  background-position: bottom;
}