CSS Zigzag Border с текстурированным фоном
Я работал над заголовком с зигзагообразной каймой. Один из способов сделать это - использовать изображения для создания эффекта зигзага.
(1) Is there any way to create a practical cross-browser zigzag border in CSS without the use of images?
Я также пытаюсь нанести текстурированный фон на этот заголовок, который распространяется на зигзаги. Однако вертикальный размер заголовка может измениться, и я не могу реализовать заголовок как одно изображение.
Если я попытаюсь добавить текстуру как к зигзагообразным краям, так и к элементу заголовка, скорее всего, текстура будет не синхронизирована.
(2) Any ideas on implementing a textured background that extends onto the zigzags without being off sync?
Мой [старый] код (вместе с текстурой) здесь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;
}
<header>
<br />
<br />
<br />
<br />
</header>
<img src="http://i.imgur.com/qKsVr.png" />
Редактировать № 1:
Спасибо Ана за код. Я взял это и улучшил это.
http://dabblet.com/gist/3401493
Я не думаю, что последовательный фон будет возможен.