CODEWITHSUNDEEP
javascripthtmlcsscss-shapesshapes
Suraj-Ui
Suraj-Ui

Reputation: 196

How to create this shape with css and html?

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>

enter image description here

Upvotes: 1

Views: 221

Answers (2)

Suraj-Ui
Suraj-Ui

Reputation: 196

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>

Upvotes: 0

Matan Sanbira
Matan Sanbira

Reputation: 1513

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>

Upvotes: 3

Related Questions