Fronteira em ziguezague CSS com um plano de fundo texturizado
Eu tenho trabalhado em um cabeçalho com uma borda em ziguezague. Uma maneira de fazer isso é usar imagens para fazer o efeito de zigue-zague.
(1) Existe alguma maneira de criar uma borda em ziguezague prática entre navegadores em CSS sem o uso de imagens?
Eu também estou tentando colocar um plano de fundo texturizado neste cabeçalho que se estende aos ziguezagues. No entanto, o tamanho vertical do cabeçalho pode mudar e não consigo implementar o cabeçalho como uma única imagem.
Se eu tentar adicionar uma textura às bordas em zigue-zague e ao elemento de cabeçalho, provavelmente a textura estará fora de sincronia.
(2) Alguma idéia sobre a implementação de um plano de fundo texturizado que se estenda sobre os ziguezagues sem estar fora de sincronia?
Meu código [antigo] (junto com uma textura) está aquijsFiddle.
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" />
Editar 1:
Obrigado Ana pelo código. Eu peguei e melhorei.
http://dabblet.com/gist/3401493
Eu não acho que um plano de fundo consistente seja possível.