小编Jam*_*ond的帖子

我有一个正在处理的项目，要求我进行圆形导航，并使用按钮，如下图所示。我可以绘制简单的形状并足够好地按照教程进行操作，但是我不知道如何绘制带有弯曲形状的这些条，如下图所示。

我提供了一个剪切路径示例，但是我认为SVG是我需要做的。

的HTML

<div class="button"></div>

的CSS

.button {
    background: radial-gradient(circle at 50% 160%,transparent 45%,red 44.5%,red 85%,transparent 85%);
        -webkit-clip-path: polygon(5% 0, 100% 0, 65% 90%, 35% 90%);
        clip-path: polygon(20% 0, 80% 0, 65% 90%, 35% 90%);
}