How to add border to shape (8 point star) css?

Question

How to add a red border outside of this 8-point star? Or is there a simple svg solution that everyone knows about?

IS: NEED:

js script

HTML

<div id="star8"></div> 

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

Answer 1

you can use mix-blend-mode and, ultimately, another 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; } 

 <div id="star8"></div> 

---

without mix-blend-mode , but z-index and :after

 #star8 { margin: 2em; border: 3px solid red; background: blue; width: 80px; height: 80px; position: relative; transform: rotate(20deg); } #star8:before { content: ""; position: absolute; z-index:-1; top: 0; left: 0; height: 80px; width: 80px; background: blue; transform: rotate(135deg); box-shadow: 0 0 0 3px red; } #star8:after { content: ""; position: absolute; top: 0; left: 0; height: 80px; width: 80px; background: blue; transform: rotate(0deg); } 

 <div id="star8"></div> 

You can also draw only bg parts (via linear-gradient ) to hide unwanted edges and add text inside: http://codepen.io/gc-nomade/pen/KWNmqw

Answer 2

SVG Solution

This can be created using a single svg path. Adding a path can be done by adding a stroke property to the path.

 <svg viewBox="-1 -1 50 50" width="200px"> <path d="M 35,40 30,48 21,42 11,44 9,34 0,30 6,20 4,10 14,8 20,0 28,5 38,3 l 1,10 8,5 -5,8 2,10z" stroke="red" stroke-linejoin="bevel" fill="black" /> </svg> 

Answer 3

The reason the div looks like it is currently happening is because you actually do not have an eight-pointed star, you have 2 squares superimposed on each other.

The first step is to add an outline to: in front of the pseudo-class. The second is to add: after a pseudo-class without an outline rotated to the same position as the original div to cover the outline drawn: before the original div overlaps.

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

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

Answer 4

Just put another rectangle on it: after, covering the red frame. http://codepen.io/anon/pen/qbrQZa

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

You should also make #star8:before only 77x77 in size to make it fit.