如何在 CSS 中使用圆形模具创建按钮

Question

我目前正在尝试将以下 PNG 重新创建为 HTML/CSS

成品应该看起来像这样 - 3 个按钮均匀分布在一个圆形“模具”中（如果你环顾元素的边框，你可以看到它们是如何勾勒出一个圆圈的。）

如何在 CSS/HTML 中重新创建它？

一种解决方案是使用剪辑路径，但我不知道如何为它们创建路径。 另一种解决方案是只使用图像作为背景，但这有其自身的问题。

ps。它也不能用border-radius复制

谢谢！

Answer 1

您可以在容器上使用overflow:hidden 和更宽的按钮：

* {
  box-sizing: border-box;
}

.box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 20px auto;
  width: 300px;
  height: 300px;
  overflow: hidden;
  border:solid 20px transparent;
  border-radius: 50%;
  background:#bdbdbd;
  box-shadow:0 0 0 10px #808080, 1px 2px 5px 10px #000;
}

.box button {
  width: 110%;
  height: 50px;
  border: solid 1px #bfa962;
  font-size: 18px;
  background: linear-gradient(#dabf63, #ad984f);
  color: #fff;
}

.box button:nth-child(2) {
  margin: 20px 0;
}

<div class="box">
  <button>first</button>
  <button>second</button>
  <button>third</button>
</div>

Answer 2

您可以将clip-path 与圆形一起使用，诀窍是确保 3 个圆圈重叠：

* {
  box-sizing:border-box;
}

.box {
  margin:20px auto;
  width:300px;
  height:300px;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:10px;
}
.box button{
  height:50px;
  border:0;
  font-size:18px;
  background:#c1ab32;
  color:#fff;
  margin:10px 0;
}

.box button:first-child {
  /* we offset by half the height and the margin*/
  clip-path:circle(120px at 50% calc(100% + 20px + 25px));
}
.box button:nth-child(2) {
  /* circle with radius of 120px at the center*/
  clip-path:circle(120px at 50% 50%);
}

.box button:last-child {
  clip-path:circle(120px at 50% calc(0% - 20px - 25px));
}

body {
 background:pink;
}

<div class="box">
<button>first</button>
<button>second</button>
<button>third</button>
</div>

类似的想法是用径向渐变为背景着色，并确保它也是同一个圆圈：

* {
  box-sizing:border-box;
}

.box {
  margin:20px auto;
  width:300px;
  height:300px;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:10px;
}
.box button{
  height:50px;
  border:0;
  font-size:18px;
  color:#fff;
  margin:10px 0;
}

.box button:first-child {
  background:radial-gradient(circle 120px at 50% calc(100% + 20px + 25px),#c1ab32 99%,transparent 100%);
}
.box button:nth-child(2) {
 background:radial-gradient(circle 120px at 50% 50%,#c1ab32 99%,transparent 100%)
}

.box button:last-child {
  background:radial-gradient(circle 120px at 50% calc(0% - 20px - 25px),#c1ab32 99%,transparent 100%)
}

body {
 background:pink;
}

<div class="box">
<button>first</button>
<button>second</button>
<button>third</button>
</div>

您还可以将剪辑路径应用于容器：

* {
  box-sizing:border-box;
}

.box {
  margin:20px auto;
  width:300px;
  height:300px;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:10px;
  border:1px solid;
  clip-path:circle(120px at 50% 50%);
}
.box button{
  height:50px;
  border:0;
  font-size:18px;
  background:#c1ab32;
  color:#fff;
}

.box button:nth-child(2) {
  margin:20px 0;
}

body {
 background:pink;
}

<div class="box">
<button>first</button>
<button>second</button>
<button>third</button>
</div>