如何为div元素制作四边（上下左右）Zigzag锯齿边框？

要给div添加四边锯齿边框，目前常用两种CSS实现方式，以下是具体代码和说明：

方法一：线性渐变多重背景实现 #

通过绘制单个锯齿单元，利用背景定位和重复规则铺满四边，兼容性较好，适合大多数场景。

代码示例 #

<div class="zigzag-box">
  这里是你的内容区域
</div>

.zigzag-box {
  width: 300px;
  padding: 2rem;
  /* 核心：用8组线性渐变拼接四边锯齿 */
  background-image: 
    /* 顶部锯齿 */
    linear-gradient(135deg, #333 25%, transparent 25%),
    linear-gradient(225deg, #333 25%, transparent 25%),
    /* 底部锯齿 */
    linear-gradient(315deg, #333 25%, transparent 25%),
    linear-gradient(45deg, #333 25%, transparent 25%),
    /* 左侧锯齿 */
    linear-gradient(225deg, #333 25%, transparent 25%),
    linear-gradient(315deg, #333 25%, transparent 25%),
    /* 右侧锯齿 */
    linear-gradient(135deg, #333 25%, transparent 25%),
    linear-gradient(45deg, #333 25%, transparent 25%);
  
  /* 控制锯齿大小，数值越大锯齿越粗 */
  background-size: 10px 10px;
  
  /* 定位各组渐变到对应边 */
  background-position: 
    0 0, 10px 0,
    0 100%, 10px 100%,
    0 0, 0 10px,
    100% 0, 100% 10px;
  
  /* 设置重复方向，水平边重复x轴，垂直边重复y轴 */
  background-repeat: 
    repeat-x, repeat-x,
    repeat-x, repeat-x,
    repeat-y, repeat-y,
    repeat-y, repeat-y;
  
  /* 填充背景色覆盖中间区域，避免渐变透显 */
  background-color: #fff;
}

调整技巧 #

• 修改background-size的数值可以改变锯齿的大小；
• 替换linear-gradient中的#333可以更改锯齿边框颜色；
• 调整padding数值控制内容与边框的间距。

方法二：SVG边框图案实现 #

利用CSS border-image属性，将自定义SVG作为边框图案，代码更简洁，便于调整锯齿形状。

代码示例 #

<div class="zigzag-box-svg">
  这里是你的内容区域
</div>

.zigzag-box-svg {
  width: 300px;
  padding: 2rem;
  /* 设置透明边框，宽度对应锯齿粗细 */
  border: 10px solid transparent;
  /* 用SVG作为边框图案，repeat表示重复铺满 */
  border-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M0 10 l5 5 l5 -5 l5 5 l5 -5" fill="none" stroke="#333" stroke-width="2"/></svg>') 10 repeat;
  background-color: #fff;
}

调整技巧 #

• 修改border的宽度可以改变锯齿粗细；
• 编辑SVG中的stroke值更改边框颜色，调整d属性可以修改锯齿的角度和形状；
• 现代浏览器均支持该方案，如需兼容旧版浏览器建议用方法一。

内容的提问来源于stack exchange，提问作者kiltro