Как создать эту фигуру с css и html?

Question

Я хочу создать фигуру, представленную на изображении ниже, но у меня есть этот код, который не соответствует моим требованиям, и я не знаю, как его создать, пожалуйста, помогите мне создать эту фигуру с HTML и CSS, это должно выглядеть как изображение, спасибо.

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

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

Answer 1

Я использовал clip-path, это PO C, с которым вы можете играть:

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

Теперь я создал ту же форму с теми же цветами

.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>