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

Question

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

成品应该看起来像这样-3个按钮均匀地间隔成一个圆圈“模具”（如果环顾元素的边界，可以看到它们如何勾勒出一个圆圈。）

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

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

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

谢谢！

Answer 1

您可以将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>

Answer 2

您可以在容器上使用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>