css实现水平锯齿边框

要在 CSS 中实现水平锯齿边框，可以使用伪元素 `::before` 和 `::after`。以下是一种实现方式：

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

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

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

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

在上面的代码中，我们使用 `padding` 属性给 div 元素添加了一些内边距，以使其内容不会与边框重叠。然后，我们使用 `::before` 和 `::after` 伪元素来创建两个三角形。这两个三角形分别位于 div 元素的上下两侧，并使用不同的边框宽度和颜色来模拟锯齿效果。最后，我们使用 `position: absolute` 将这两个伪元素定位在 div 元素的顶部和底部，并使用 `content: ""` 添加了一个空内容，以便这些伪元素能够显示出来。

完成后，您会看到 div 元素的上下两侧有一条水平锯齿边框。