css实现水平方向的三角形锯齿效果

要在 CSS 中实现水平方向的三角形锯齿效果，可以使用伪元素 `::before` 和 `::after`。以下是一种实现方式：

/* 设置 div 元素样式 */
div {
  position: relative;
  height: 20px;
  background-color: #f0f0f0;
}

/* 设置伪元素样式 */
div::before, div::after {
  content: "";
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
  border-style: solid;
}

/* 设置伪元素 before 样式 */
div::before {
  left: -10px;
  border-width: 10px 10px 10px 0;
  border-color: transparent #f0f0f0 transparent transparent;
}

/* 设置伪元素 after 样式 */
div::after {
  right: -10px;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent #f0f0f0;
}

在上面的代码中，我们先设置了一个 div 元素，并将其高度设置为 20px，并设置了一个背景色。然后，我们使用 `::before` 和 `::after` 伪元素来创建两个三角形。这两个三角形分别位于 div 元素的左右两侧，并使用不同的边框宽度和颜色来模拟锯齿效果。最后，我们使用 `position: absolute` 将这两个伪元素定位在 div 元素的顶部，并使用 `content: ""` 添加了一个空内容，以便这些伪元素能够显示出来。