CSS Star outline - css

Question

Is there any way to make a css star shape outline?
I know you can make a filled in one, with the following css
.star-five {
margin: 50px 0;
position: relative;
display: block;
color: red;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
-moz-transform: rotate(35deg);
-webkit-transform: rotate(35deg);
-ms-transform: rotate(35deg);
-o-transform: rotate(35deg);
}
.star-five:before{
...
}
.star-five:after {
...
}
Working example here: jsfiddle
But what about a transparent fill with a red outline?

Answer 1

I know this isn't quite the answer you were looking for, but I'm gonna post it anyway. For my knowledge there's no way of doing this with pure CSS. However, in my website I took a more easy approach. I had to style a rating bar with stars. Instead of creating the star with CSS, I simply did this:
<span>☆</span>
You can style this star however you like (and even fill it with the CSS content property).
Hope this help, and looking forward to see the other answers here.

Answer 2

You could use an SVG:
<svg width="320" height="320"><path d="
M 160.000 180.000
L 183.511 192.361
L 179.021 166.180
L 198.042 147.639
L 171.756 143.820
L 160.000 120.000
L 148.244 143.820
L 121.958 147.639
L 140.979 166.180
L 136.489 192.361
L 160.000 180.000
" stroke="#f00" stroke-width="1" fill="none"/></svg>
I used this site to generate it if it helps: http://www.smiffysplace.com/stars.html

Answer 3

Here is a pure CSS solution using the same Fiddle you provided. I just scaled a star in and made it white.
body {
margin: 0px;
}
.star-five {
margin: 50px 0;
position: relative;
display: block;
color: red;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
-moz-transform: rotate(35deg);
-webkit-transform: rotate(35deg);
-ms-transform: rotate(35deg);
-o-transform: rotate(35deg);
}
.star-five:before {
border-bottom: 80px solid red;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
position: absolute;
height: 10px;
width: 0;
top: -45px;
left: -65px;
display: block;
content: '';
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg);
}
.star-five:after {
position: absolute;
display: block;
color: red;
top: 3px;
left: -105px;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
content: '';
}
.star-outline>.star-five,
.star-outline>.star-five:before,
.star-outline>.star-five:after {
border-bottom-color: white;
}
.star-outline {
position: absolute;
top: 0px;
left: 0px;
transform: scale(0.9);
}
<div class="star">
<span class="star-five" width="10" height="10">
</span>
<div class="star-outline">
<span class="star-five">
</span>
</div>
</div>

Answer 4

Use below CSS properties:
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: red;
Visualization:
Hope this could help ~ RDaksh