Rendere il bordo del triangolo frastagliato in CSS

Ho una forma con un bordo come questo in Photoshop:

Immagine

È ansible rendere i triangoli ripetuti come un confine con i CSS?

Puoi usare i gradienti css3 per creare uno sfondo con motivi a zigzag, usare lo pseudo after css per applicarlo come un bordo.

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; } 

Fonte: CSS Zigzag Border con uno sfondo con texture

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

Per i futuri spettatori, ho trovato questo adattamento della risposta di @ extramaster ad essere un po ‘più semplice.

È essenzialmente lo stesso, ma usa un minor numero di gradienti di sfondo e consente di mostrare l’object di supporto ( .navbar nel mio markup) invece di codificare a .navbar il secondo colore nello 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 */ } 

È ansible creare un singolo triangolo usando CSS in modo abbastanza semplice (basta modificare le proprietà del bordo). Affinché questo funzioni, dovrai generare un bel po ‘di markup da solo. Consiglierei contro questo approccio.

Invece è meglio usare una singola immagine contenente un triangolo singolo (preferibilmente un file .png trasparente) e quindi utilizzare le proprietà background-image e background-repeat ( repeat-x ) per legarlo a un div (il tuo “bordo”).

Sfortunatamente non esiste ancora un modo semplice per raggiungere questo objective usando puro CSS.

C’è una proprietà border-image in CSS3. Forse puoi lavorare nel modo che desideri. Più qui http://www.w3schools.com/cssref/css3_pr_border-image.asp