4 rounded points star shape - html

Question

I am trying to get this star as pixel perfect as possible in CSS, here's what I tried so far, but it's a 5 angled star, and I want to have it only 4 points also how can I make the corners more rounded?
#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: 0;
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: '';
}
<div id="star-five"></div>

Answer 1

Maybe you could use a gradient on the Black Four Pointed Star Unicode char:
✦
It has some compatibility issues (mostly caused by text-fill-color) but depending on your requirements it could get the job done.
.four-point-star::after,
.four-point-star::before {
position: absolute;
top: 0;
left: 0;
content: "\2726";
font-size: 12rem;
}
.four-point-star::after { /* The foreground star */
background: linear-gradient(135deg, rgba(255,191,183,1) 20%, rgba(243,44,117,1) 70%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.four-point-star::before { /* The star shadow */
color: transparent;
text-shadow: 2px 3px 10px rgba(242, 96, 85, 1);
}
/* Demo styling */
body {
background: #fbd629;
padding: 0 2rem;
}
.four-point-star {
position: relative;
}
<span class="four-point-star"></span>

Answer 2

Clearly, for this kind of shape, and inline SVG would be the simplest and the most crossbrowser solution (and with a responsive pixel perfect output).
Here is a simple inline svg code to make a four point star filled with a gradient:
svg{
display:block; margin:0 auto;
width:30%; height:auto;
}
/* For the demo */ body{background: url('https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg');background-size:cover;}
<svg viewbox="0 0 10 10">
<defs>
<linearGradient id="starGrad">
<stop offset="0%" stop-color="rgb(153,218,255)" />
<stop offset="100%" stop-color="rgb(0,128,128)"/>
</linearGradient>
</defs>
<path fill="url(#starGrad)" d="M5 1 Q5.8 4.2 9 5 Q5.8 5.8 5 9 Q4.2 5.8 1 5 Q4.2 4.2 5 1z" />
</svg>
The four points are made with the path element and using quadratic bezier curves. The star is filled with an SVG linear gradient.

Answer 3

You can get four point star using two rotated and skewed rectangles.
body {
/* just styles for demo */
background-color: #fdd700;
}
.four-point-star {
width: 100px;
height: 100px;
position: relative;
margin-top: 100px;
margin-left: 100px;
}
.four-point-star:before,
.four-point-star:after {
content: "";
position: absolute;
background-color: #fa5b88;
display: block;
left: 0;
width: 141.4213%; /* 100% * √2 */
top: 0;
bottom: 0;
border-radius: 5%;
transform: rotate(66.66deg) skewX(45deg);
}
/* the same but +90deg to rotate */
.four-point-star:after {
transform: rotate(156.66deg) skew(45deg);
}
<div class="four-point-star"></div>

Answer 4

I would suggest an SVG. If you didn't want another http request for the svg file, you could include the svg code in the 'content' attribute:
content: url("data:image/svg+xml; utf8, <svg.. code here</svg>");
.star-4-point {
background: url("data:image/svg+xml; utf8,<svg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='50px' height='50px' viewBox='0 0 50 50' style='enable-background:new 0 0 50 50;' xml:space='preserve'><path d='M25,50c0,0,1.325-8.413,8.957-16.043C41.587,26.325,50,25,50,25l0,0c0,0-8.413-1.325-16.043-8.957C26.325,8.413,25,0,25,0 l0,0c0,0-1.325,8.413-8.957,16.043C8.413,23.675,0,25,0,25l0,0c0,0,8.413,1.325,16.043,8.957C23.675,41.588,25,50,25,50'/></svg>");
height: 50px;
width: 50px;
}
<div class="star-4-point"></div>