Javascript 如何使用css和html创建此形状？

我想创建下图中给出的形状，但我有这个代码不符合我的要求，我不知道任何方法来创建这个，请帮助我用HTML和CSS创建这个形状，它应该看起来像一个图像，谢谢

.star
{
字体大小：100px；
背景色：浅绿色；
颜色：白色；
}

---

⍟现在我已经用相同的颜色创建了相同的形状


.star
{
字体大小：100px；
背景：-webkit线性梯度（#e8e8e8 50%，#fff 50%）；
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
}
斯塔迪夫先生{
背景色：#00ced1；
身高：100%；
宽度：100%；
}

✪
现在我用相同的颜色创建了相同的形状


.star
{
字体大小：100px；
背景：-webkit线性梯度（#e8e8e8 50%，#fff 50%）；
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
}
斯塔迪夫先生{
背景色：#00ced1；
身高：100%；
宽度：100%；
}

✪
我使用了
剪辑路径
，
这是一个可以玩的POC：


正文{
背景：水；
}
.明星背景{
背景：白色；
边框：实心#02b7b7 1px；
边界半径：50%；
填充：25px；
高度：300px；
宽度：300px；
}
.明星{
高度：300px；
宽度：300px；
背景：水；
剪辑路径：多边形（50%0%、64%30%、98%35%、71%58%、79%91%、50%73%、21%91%、29%57%、2%35%、36%30%）；
}
我使用了
剪辑路径
，
这是一个可以玩的POC：


正文{
背景：水；
}
.明星背景{
背景：白色；
边框：实心#02b7b7 1px；
边界半径：50%；
填充：25px；
高度：300px；
宽度：300px；
}
.明星{
高度：300px；
宽度：300px；
背景：水；
剪辑路径：多边形（50%0%、64%30%、98%35%、71%58%、79%91%、50%73%、21%91%、29%57%、2%35%、36%30%）；
}