圆形导航的剪切路径按钮

Question

我需要制作一个圆形导航栏，其中心透明，并且按钮形状像钢铁侠的东西周围的条形。

下面是我尝试使用剪切路径的方法...是否可以通过做曲线来使此操作更容易，还是必须绘制更多的点以使其看起来更好？

CSS

.circle-new-btn {
    background: rgba(0,0,0,1.00);
    height: 300px;
    width: 300px;
    -webkit-clip-path: polygon(52% 21%, 57% 22%, 61% 24%, 65% 28%, 68% 31%, 59% 48%, 56% 46%, 53% 44%, 49% 43%, 45% 42%, 41% 44%, 38% 47%, 34% 50%, 32% 28%, 36% 25%, 40% 24%, 46% 22%);
clip-path: polygon(52% 21%, 57% 22%, 61% 24%, 65% 28%, 68% 31%, 59% 48%, 56% 46%, 53% 44%, 49% 43%, 45% 42%, 41% 44%, 38% 47%, 34% 46%, 32% 28%, 36% 25%, 40% 24%, 46% 22%);
}

.circle-new-btn:hover {
    background: rgba(111,111,0,1.00);
}

HTML

<div class="circle-new-btn"></div>

Answer 1

这里是一个想法，您可以如何使用CSS创建此形状：

.box {
 width:200px;
 height:100px;
 padding:20px 0;
 box-sizing:border-box;
 color:#fff;
 text-align:center;
 background:
  radial-gradient(circle at 50% 160%,transparent 45%,blue 44.5%,blue 85%,transparent 85%);
 -webkit-clip-path: polygon(0 0, 100% 0, 75% 90%, 25% 90%);
 clip-path: polygon(0 0, 100% 0, 75% 90%, 25% 90%);
}

<div class="box">
 Some text
</div>

然后，您可以简单地进行一些旋转，以将按钮围绕大圆圈放置。