CSS中锯齿形三角形边框的制作

在Photoshop中，我有一个具有如下边缘的形状：

是否可以使用CSS将重复的三角形作为边框？

您可以非常轻松地使用CSS创建边框（只需调整边框属性）。为了让它工作，您需要自己生成相当多的标记。我反对这种做法

相反，您最好使用包含单个三角形的单个图像（最好是透明的.png），然后使用

背景图像

和

背景重复

（

repeat-x

）属性将其绑定到div（您的“边框”）

---

不幸的是，目前还没有一种直接的方法来使用纯CSS实现这一点。

CSS3中有一个边框图像属性。 也许你可以用你想要的方式解决。详情如下：

还是在这里

---

您可以使用渐变创建之字形图案背景，使用

：：after

pseud元素将其像边框一样应用

.header{
颜色：白色；
背景色：#2B3A48；
文本对齐：居中；
}
.header：：之后{
内容：“；
显示：块；
位置：相对位置；
顶部：0px；
左：0px；
宽度：100%；
高度：36px；
背景：线性梯度（#2B3A48 0%，透明0%），线性梯度（135度，#27220 33.33%，透明33.33%）0%，线性梯度（45度，#27220 33.33%，#2B3A48 33.33%）0%；
背景重复：重复-x；
背景尺寸：0px 100%，9px 27px，9px 27px；
}

---

这是一个标题

对于未来的观众，我发现对的这种改编要简单一些

基本上是一样的，但它使用的背景渐变少了一个，并且允许背景对象（

.navbar

在我的标记中）显示出来，而不是将第二种颜色硬编码成锯齿形

JsFiddle:

.header{
位置：相对位置；
颜色：白色；
背景色：#2B3A48；
文本对齐：居中；
}
navbar先生{
背景：#272220；
高度：20px；
}
.标题：之后{
内容：“；
位置：绝对位置；
显示：块；
高度：10px；
底部：-10px；
/*-高度*/
左：0；
右：0；
/*TODO添加浏览器前缀*/
背景：线性梯度（45度，透明33.333%，#2B3A48 33.333%，#2B3A48 66.667%，透明66.667%），线性梯度（-45度，透明33.333%，#2B3A48 33.333%，#2B3A48 66.667%，透明66.667%）；
背景尺寸：8px 20px；
/*牙齿大小双倍高*/
背景位置：0-10px；
/*水平偏移-高度*/
}

这是一个标题

就个人而言，我认为剪辑路径比复杂的背景渐变更容易使用/理解

正文{
字体系列：Roboto、'Open Sans'、Helvetica、Sans serif；
}
.集装箱{
背景：ddd；
保证金：0自动；
最大宽度：800px；
填充：30px；
}
h1:第一个子项{margin:0；}
.锯齿形底{
位置：相对位置；
}
.锯齿形底{
背景：ddd；
内容：“；
高度：2vw；
位置：绝对位置；
最高：100%；
左：0；
右：0；
剪辑路径：多边形(
0 0, 2.5% 100%, 5% 0,  7.5% 100%, 
10% 0,12.5% 100%,15% 0, 17.5% 100%, 
20% 0,22.5% 100%,25% 0, 27.5% 100%, 
30% 0,32.5% 100%,35% 0, 37.5% 100%, 
40% 0,42.5% 100%,45% 0, 47.5% 100%, 
50% 0,52.5% 100%,55% 0, 57.5% 100%, 
60% 0,62.5% 100%,65% 0, 67.5% 100%, 
70% 0,72.5% 100%,75% 0, 77.5% 100%, 
80% 0,82.5% 100%,85% 0, 87.5% 100%, 
90% 0,92.5% 100%,95% 0, 97.5% 100%, 100% 0);
}
}

看起来像一张收据
如果想要更多或更少的尖峰，只需调整伪元素上的剪辑路径，如果想要它们更高或更短，只需调整高度

有关弯曲底边（如水滴）而非三角形底边的类似效果，请参阅。无响应，但可在