How to create this shape with css and html?

Question

I want to create shape given in below image but I have this code that not meeting my requirement and i don't know any way to create this please help me to create this shape with HTML and CSS it should look like an image, thank you.

 .star { font-size: 100px; background-color: aqua; color: white; }

 <small class="star">&#9055;</small>

Answer 1

I used clip-path , its a POC that you can play with:

 body { background: aqua; } .star-background { background: white; border: solid #02b7b7 1px; border-radius: 50%; padding: 25px; height: 300px; width: 300px; } .star { height: 300px; width: 300px; background: aqua; clip-path: polygon(50% 0%, 64% 30%, 98% 35%, 71% 58%, 79% 91%, 50% 73%, 21% 91%, 29% 57%, 2% 35%, 36% 30%); }

 <div class="star-background"> <div class="star"></div> </div>

Answer 2

Now I have created the same shape with the same colors

 .star { font-size: 100px; background: -webkit-linear-gradient(#e8e8e8 50%, #fff 50%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .stardiv{ background-color:#00ced1; height:100%; width:100%; }

 <div class="stardiv"> <small class="star">&#10026;</small> <div>