我在Photoshop中有一个像这样的边缘的形状:

是否可以将重复的三角形作为CSS边框?
我一直在研究带有锯齿形边框的标题.一种方法是使用图像来制作锯齿形效果.
(1)有没有办法在不使用图像的情况下在CSS中创建实用的跨浏览器之字形边框?
我也试图在这个标题上添加带纹理的背景,延伸到曲折.但是,标题的垂直大小可能会更改,我无法将标题实现为单个图像.
如果我尝试在曲折边缘和标题元素上添加纹理,很可能,纹理将不同步.
(2)有关实现延伸到曲折的纹理背景而不是不同步的任何想法?
我的[旧]代码(以及纹理)在jsFiddle上.
body {
padding: 20px;
}
header {
width: 240px;
background-color: #BCED91;
}
header:after {
content: " ";
display: block;
position: relative;
width: 240px;
bottom: -15px;
height: 15px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAPCAYAAACWV43jAAAAw0lEQVRIx83RsQ3CMBCF4T83AZKLVOmyBa1HSIlXwKySGaDOBClZAToWQIpETQONyxAS+2J4pe9knd5X9EP7QicPYAsUwBnYaHwqSsd1QGmNv1rjL0AZ3pJTKDTorPGnsUE/tDvg+KsG70D96TiAMKvDbtYDO6Cyxt++LYadKpY8hthNtTaVGHLRJJ3R5mJy0SbVJp9D7FJaSyWXNUk1yGVt0lTyMWK3ZmtLySUnaQy55CZdSi7AHmis8U/+JOGWBji8AaYPVy6VELZvAAAAAElFTkSuQmCC) repeat-x;
}
img {
margin-top: 50px;
}Run Code Online (Sandbox Code Playgroud)
<header>
<br />
<br />
<br />
<br />
</header>
<img src="http://i.imgur.com/qKsVr.png" />Run Code Online (Sandbox Code Playgroud)
编辑#1:
谢谢Ana的代码.我接受了它并对其进行了改进.
http://dabblet.com/gist/3401493
我不认为一致的背景是可能的.