Creare una strana forma in CSS

Sto provando a creare questa forma in css.

inserisci la descrizione dell'immagine qui

Sono andato il più lontano ansible e non riesco a creare il picco sul lato destro

Ecco il mio CSS

nav li a { float: left; height: 23px; line-height: 24px; position: relative; padding: 1px 10px 0 24px; color: #fff; background-color: #393233; text-align: center; width:75%; } nav li a:before { content: ""; float: left; position: absolute; top: 0; left: 0; width: 0; height: 0; border-color: white #393233 white white; border-style: solid; border-width: 12px 12px 12px 12px; } nav li a:after { content: ""; float: left; position: absolute; top: 0; right: -12px; width: 0; height: 0; border-color: #393233 transparent #393233 #393233; border-style: solid; border-width: 12px 12px 12px 12px; } 

Ho creato un jsfiddle per esprimere il mio codice.

http://jsfiddle.net/2Cn3a/

Ogni aiuto è molto apprezzato

Una soluzione sarebbe usare li posto di li a come elemento relativo, quindi è ansible aggiungerne un’altra :after . Guardalo in azione: http://jsfiddle.net/z47fN/

Se aggiungi un intervallo dopo il tag, puoi creare un’altra freccia all’interno di li.

http://jsfiddle.net/2Cn3a/1/