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>

Matan Sanbira · Accepted Answer · 2020-01-28 06:49:00Z

3

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>

answered Jan 28, 2020 at 6:49

Matan Sanbira

1,55310 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Suraj-Ui · Accepted Answer · 2020-01-28 07:09:32Z

0

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>

edited Jan 28, 2020 at 7:09

answered Jan 28, 2020 at 6:43

Suraj-Ui

1962 silver badges14 bronze badges

Collectives™ on Stack Overflow

How to create this shape with css and html?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related