Come aggiungo un bordo a una forma css (a 8 punte)?

Come aggiungo un bordo rosso all’esterno di questa stella a 8 punte? O c’è una soluzione svg semplice che qualcuno conosce?

È: inserisci la descrizione dell'immagine qui BISOGNO: inserisci la descrizione dell'immagine qui

JS violino

HTML

CSS

 #star8 { border: 3px solid red; background: blue; width: 80px; height: 80px; position: relative; -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -ms-transform: rotate(20deg); -o-transform: rotate(20eg); } #star8:before { content: ""; position: absolute; top: 0; left: 0; height: 80px; width: 80px; background: blue; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); } 

puoi usare mix-blend-mode e infine l’altro pseudo: DEMO

 #star8:after { content: ""; position: absolute; top: 0; left: 0; height: 80px; width: 80px; transform: rotate(135deg); box-shadow: 0 0 0 3px red;::* a border works too */ mix-blend-mode:overlay; } 
 #star8 { margin: 2em; border: 3px solid red; background: blue; width: 80px; height: 80px; position: relative; transform: rotate(20deg); } #star8:before { content: ""; position: absolute; top: 0; left: 0; height: 80px; width: 80px; background: blue; transform: rotate(135deg); } #star8:after { content: ""; position: absolute; top: 0; left: 0; height: 80px; width: 80px; transform: rotate(135deg); box-shadow: 0 0 0 3px red; mix-blend-mode:overlay; } 
 

Soluzione SVG

Questo può essere creato con un singolo percorso svg. L’aggiunta di una struttura può essere eseguita aggiungendo una proprietà di traccia al percorso

    

La ragione per cui il div sembra che attualmente è che in realtà non hai una stella a 8 punte, hai 2 quadrati sovrapposti l’uno sull’altro.

Il primo passo è aggiungere il contorno alla: pseudo class prima. Il secondo è aggiungere una: dopo pseudo-class senza contorno, ruotata nella stessa posizione del div originale, per coprire il contorno disegnato da: prima di sovrapporre il div originale.

Demo: https://jsfiddle.net/hj1eh6md/

e CSS:

 #star8 { border: 3px solid red; background: olive; width: 80px; height: 80px; position: relative; -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); -ms-transform: rotate(20deg); -o-transform: rotate(20eg); } #star8:before { border: 3px solid red; content: ""; position: absolute; top: 0; left: 0; height: 80px; width: 80px; background: olive; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); } #star8:after{ content: ""; position: absolute; top: 0; left: 0; height: 80px; width: 80px; background: olive; } 

Basta sovrapporre un altro retto su di esso: dopo, coprendo il bordo rosso. http://codepen.io/anon/pen/qbrQZa

 #star8:after { content: ""; position: absolute; top: 0; left: 0; height: 80px; width: 80px; background: blue; } 

Dovresti anche fare #star8:before solo 77×77 di dimensioni per adattarlo.