时间戳

首页 > 解决方案 > 圆形导航的剪辑路径按钮

html - 圆形导航的剪辑路径按钮

问题描述

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

例子

下面是我使用剪辑路径的尝试......有没有办法做曲线来让这更容易，还是我必须画更多的点才能让它看起来不错？

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>

标签： htmlcss

解决方案

以下是如何使用 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>

然后您可以简单地应用一些旋转来将按钮放置在大圆圈周围。

推荐阅读