Borde zigzag CSS con un fondo con textura

He estado trabajando en un encabezado con un borde en zigzag. Una forma de hacer esto es usar imágenes para hacer el efecto de zigzag.

(1) ¿Hay alguna forma de crear un borde en zigzag práctico entre navegadores en CSS sin el uso de imágenes?

También estoy tratando de poner un fondo con textura en este encabezado que se extiende a los zigzags. Sin embargo, el tamaño vertical del encabezado puede cambiar y no puedo implementar el encabezado como una sola imagen.

Si bash agregar una textura a los bordes en zigzag y al elemento del encabezado, es probable que la textura se desactive.

(2) ¿Alguna idea sobre la implementación de un fondo con textura que se extiende a los zigzags sin estar fuera de sincronización?

Mi [antiguo] código (junto con una textura) está aquí en 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; } 
 





Editar # 1:

Gracias Ana por el código. Lo tomé y lo mejoré.

http://dabblet.com/gist/3401493

No creo que sea posible un trasfondo constante.

Si va a usar border-image , entonces no se trata de una solución de navegador cruzado porque IE no lo admite.

Además, aunque cada versión actual del navegador, excepto IE9, admite tanto gradientes CSS (que le permiten obtener un patrón en zig-zag ) como border-image , la última vez que lo verifiqué (hace unos meses, por lo que es mejor probarlo de nuevo ), usando gradientes para border-image solo funcionó en WebKit. Además, no creo que incluso en WebKit esto funcione con más de un degradado (ya que solo puede establecer una imagen de borde y un degradado es una imagen) y necesita dos degradados para el patrón de zig-zag.

El código para el patrón de zig-zag CSS es:

 background: linear-gradient(#BCED91 49%, transparent 49%), linear-gradient(-45deg, white 33%, transparent 33%) 0 50%, white linear-gradient(45deg, white 33%, #BCED91 33%) 0 50%; background-repeat: repeat-x; background-size: 1px 100%, 40px 40px, 40px 40px; 

Si quieres una textura debajo de esta que esté sincronizada con esta, entonces debes asegurarte de que se repite en los mismos intervalos ( 40px , pero también puedes ir a 20px ).


Editar : con respecto a los polyfills, puedes probar uno de los que se enumeran aquí : CSS3 PIE o cssSandpaper

(En navegadores modernos) puede usar SVG para crear dibujos simples y usarlos como imágenes de fondo CSS incrustadas como URI de datos .

Así es como se ven los SVG:

 body { background: #888; } 
             

CSS mínimo mejorado:

 div { background: #1ba1e2; position: relative; } div:after { content: ""; display: block; position: absolute; width: 100%; height: 30px; background: linear-gradient(-45deg, transparent 75%, #1ba1e2 0) 0 50%, linear-gradient(45deg, transparent 75%, #1ba1e2 0) 0 50%; background-size: 30px 30px; } /* Styles just for demo */ h1 { color: #fff; text-align: center; margin: 0; padding: 0.5em; } 
 

Zig Zag Borders