CSS 如何用圆形模具制作按钮
How to create buttons with circle mold in CSS
我目前正在尝试将以下 PNG 重新创建为 HTML/CSS
成品应该看起来像这样 - 3 个按钮均匀分布在一个圆圈中"mold"(如果你环顾元素的边框,你可以看到它们如何勾勒出一个圆圈。)
如何在 CSS/HTML 中重新创建它?
一种解决方案是使用 clip-path,但我不知道如何为它们创建路径。
另一种解决方案是只使用图像作为背景,但这有其自身的问题。
ps。它也不能用 border-radius 复制
谢谢!
您可以将 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>
一个类似的想法是用 radial-gradient 为背景着色,并确保它也是同一个圆圈:
* {
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>
您还可以将 clip-path 应用于容器:
* {
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>
您可以在容器上使用 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>
我目前正在尝试将以下 PNG 重新创建为 HTML/CSS
成品应该看起来像这样 - 3 个按钮均匀分布在一个圆圈中"mold"(如果你环顾元素的边框,你可以看到它们如何勾勒出一个圆圈。)
如何在 CSS/HTML 中重新创建它?
一种解决方案是使用 clip-path,但我不知道如何为它们创建路径。 另一种解决方案是只使用图像作为背景,但这有其自身的问题。
ps。它也不能用 border-radius 复制
谢谢!
您可以将 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>
一个类似的想法是用 radial-gradient 为背景着色,并确保它也是同一个圆圈:
* {
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>
您还可以将 clip-path 应用于容器:
* {
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>
您可以在容器上使用 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>