当前位置：首页 > CSS

css制作锯齿

2026-04-01 14:38:53CSS

使用 CSS 制作锯齿效果

方法一：使用线性渐变

通过 CSS 的 linear-gradient 可以创建锯齿边缘效果。以下是一个示例代码：

.sawtooth {
  height: 100px;
  background: linear-gradient(45deg, transparent 33.33%, #000 33.33%, #000 66.66%, transparent 66.66%),
              linear-gradient(-45deg, transparent 33.33%, #000 33.33%, #000 66.66%, transparent 66.66%);
  background-size: 20px 40px;
}

这段代码会创建一个 45 度角的锯齿图案。调整 background-size 可以改变锯齿的大小和密度。

方法二：使用伪元素和边框

利用伪元素和 CSS 边框属性也能实现锯齿效果：

.sawtooth-border {
  position: relative;
  height: 50px;
  background: #f0f0f0;
}

.sawtooth-border::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 100%;
  height: 20px;
  background: linear-gradient(
    to right bottom,
    #f0f0f0 50%,
    transparent 50%
  ), linear-gradient(
    to left bottom,
    #f0f0f0 50%,
    transparent 50%
  );
  background-size: 20px 20px;
  background-repeat: repeat-x;
}

方法三：使用 SVG 背景

SVG 提供了更精确的锯齿控制：

.sawtooth-svg {
  height: 100px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><polygon points="0,20 10,0 20,20" fill="%23000"/></svg>');
  background-size: 20px 20px;
}

方法四：使用 clip-path

现代 CSS 的 clip-path 属性可以实现更复杂的锯齿形状：

css制作锯齿

.sawtooth-clip {
  height: 100px;
  background: #000;
  clip-path: polygon(
    0% 100%,
    5% 0%,
    10% 100%,
    15% 0%,
    20% 100%,
    25% 0%,
    30% 100%,
    35% 0%,
    40% 100%,
    45% 0%,
    50% 100%,
    55% 0%,
    60% 100%,
    65% 0%,
    70% 100%,
    75% 0%,
    80% 100%,
    85% 0%,
    90% 100%,
    95% 0%,
    100% 100%
  );
}