4 rounded dots star

Question

I am trying to get this star as the maximum possible pixel in CSS, this is what I have tried so far, but it is a 5-angle star and I want to have it only 4 points, 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

Perhaps you could use a gradient on the Black Four Pointed Star Unicode char:

✦

It has compatibility issues (mostly caused by text-fill-color ), but depending on your requirements, it can do its job.

 .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

Obviously, for this type of shape and embedded SVG, it would be the simplest and most cruciform solution (and with excellent pixel output).
Here is a simple svg built-in code to create 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> 

Four points are made using a path element and using quadratic bezier curves . Star filled linear SVG gradient

Answer 3

I would suggest SVG. If you do not need another HTTP request for the svg file, you can 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> 

Answer 4

You can get a four-point star using two rotating 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>