如何用 css 和 html 创建这个形状？答案

【问题标题】：How to create this shape with css and html?如何用 css 和 html 创建这个形状？
【发布时间】：2020-01-28 15:09:32
【问题描述】：

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

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

&lt;small class="star"&gt;&amp;#9055;&lt;/small&gt;

【问题讨论】：

标签： javascript html css css-shapes shapes

【解决方案1】：

我用clip-path, 它是一个你可以玩的 POC：

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>

【讨论】：

【解决方案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>

【讨论】：