Hacer borde de triángulo irregular en CSS

Tengo una forma con un borde como este en Photoshop:

imagen

¿Es posible hacer los triangularjs repetidos como un borde con CSS?

Puede usar gradientes css3 para crear un fondo en zig-zag, use el pseudo after css para aplicarlo como un borde.

HTML:

 

This is a header

CSS:

 .header{ color:white; background-color:#2B3A48; text-align:center; } .header:after { content: " "; display:block; position: relative; top:0px;left:0px; width:100%; height:36px; background: linear-gradient(#2B3A48 0%, transparent 0%), linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 linear-gradient(45deg, #272220 33.33%, #2B3A48 33.33%) 0 0%; background: -webkit-linear-gradient(#2B3A48 0%, transparent 0%), -webkit-linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 -webkit-linear-gradient(45deg, #272220 33.33%, #2B3A48 33.33%) 0 0%; background: -o-linear-gradient(#2B3A48 0%, transparent 0%), -o-linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 -o-linear-gradient(45deg, #272220 33.33%, #2B3A48 33.33%) 0 0%; background: -moz-linear-gradient(#2B3A48 0%, transparent 0%), -moz-linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 -moz-linear-gradient(45deg, #272220 33.33%, #2B3A48 33.33%) 0 0%; background-repeat: repeat-x; background-size: 0px 100%, 9px 27px, 9px 27px; } 

Fuente: CSS Zigzag Border con un fondo texturizado

JSFiddle: http://jsfiddle.net/kA4zK/

Para los futuros espectadores, esta adaptación de la respuesta de @exttwigster me pareció un poco más simple.

Es esencialmente lo mismo, pero usa menos degradados de fondo y permite que se .navbar objeto de respaldo ( .navbar en mi marcado) en lugar de codificar por hardware el segundo color en zig-zag.

JsFiddle: http://jsfiddle.net/861gjx0b/2/

html:

 

This is a header

css:

 .header{ position:relative; color:white; background-color:#2B3A48; text-align:center; } .navbar { background: #272220; height:20px; } .header:after { content: ""; position: absolute; display: block; height: 10px; bottom: -10px; /* -height */ left:0; right:0; /* TODO Add browser prefixes */ background: linear-gradient( 45deg, transparent 33.333%, #2B3A48 33.333%, #2B3A48 66.667%, transparent 66.667% ),linear-gradient( -45deg, transparent 33.333%, #2B3A48 33.333%, #2B3A48 66.667%, transparent 66.667% ); background-size: 8px 20px; /* toothSize doubleHeight */ background-position: 0 -10px; /* horizontalOffset -height */ } 

Puede crear un triángulo individual usando CSS con bastante facilidad (solo ajuste las propiedades de los bordes). Para que esto funcione, necesitarás generar bastante markup tú mismo. Recomendaría contra este enfoque.

En cambio, es mejor que uses una imagen individual que contenga un solo triángulo (preferiblemente un .png transparente) y luego utilices las propiedades background-image y background-repeat ( repeat-x ) para vincular eso a un div (tu “frontera”).

Desafortunadamente, todavía no hay una manera directa de lograr esto usando CSS puro.

Hay una propiedad de imagen de borde en CSS3. Tal vez puedas resolverlo de la manera que quieras. Más aquí http://www.w3schools.com/cssref/css3_pr_border-image.asp