如何仅使用 CSS 制作甜甜圈片段
How to make a doughnut segment using only CSS
如何让这个形状只用css
我尝试过的:
.button-up {
border-top: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
border-bottom: 35px solid transparent;
width: 200px;
}
<div class="button-up"></div>
我会选择一些 linear/radial-gradient
这样的:
.box {
width:200px;
height:200px;
border-radius:50%;
background:
linear-gradient(-30deg, white 50%,transparent 50.5%),
linear-gradient(30deg, white 50%,transparent 50.5%),
radial-gradient(farthest-side at center,transparent 40%,blue 41%);
}
<div class="box">
</div>
带边框:
.box {
width:200px;
height:200px;
border-radius:50%;
background:
linear-gradient(to top,white 58.5%,transparent 60%),
linear-gradient(-30deg, white calc(50% - 4px),green calc(50% - 4px) 50%,transparent 0),
linear-gradient(30deg, white calc(50% - 4px),green calc(50% - 4px) 50%,transparent 0),
radial-gradient(farthest-side at center,
transparent calc(42% - 5px),
green calc(42% - 4px) 42%,
blue 42% calc(100% - 4px),green calc(100% - 3px));
}
<div class="box">
</div>
你也可以考虑SVG,这样更简单:
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' width='300' height='300' fill='blue'>
<path stroke="green" stroke-width=1 d='M24 32 C28 28 37 28 40 32 L52 22 C38 8 26 8 12 22 Z' />
</svg>
这是 clip-path
的另一个想法:
.box {
width:200px;
height:200px;
border-radius:50%;
background:
radial-gradient(farthest-side at center,transparent 40%,blue 41%);
clip-path: polygon(0 0,0 10%, 50% 50%, 100% 10%,100% 0);
}
<div class="box">
</div>
相关问题:
如果您更喜欢边框方法而不是 SVG 或渐变,这里有一种仅使用 border-radius
, the pseudo element ::after
and some positioning:
的方法
.shape,
.shape::after {
position: absolute;
border-radius: 100%;
}
.shape {
height: 200px;
width: 200px;
border: 100px solid transparent;
border-top: 100px solid #375c89;
}
.shape::after {
content: '';
height: 190px;
width: 198px;
top: -95px;
left: -89px;
border: 90px solid transparent;
border-top: 90px solid #4f81bc;
}
<div class="shape"></div>
工作原理
您可以分两步创建此形状。
第 1 步:使用 border-radius: 100%
创建一个甜甜圈段,使其成为圆形。然后只对顶部边框应用颜色并使其他边框透明。这样你就得到了一个圆段。现在给你的元素一个 width
和一个大于 0 的 height
来将圆圈变成一个甜甜圈。
第 2 步:将相同的样式应用于伪元素 ::after
,但给它的 width
、height
和边框稍微少一些宽度。根据您的需要调整值。现在用 position: absolute
定位两个元素,以调整重叠伪元素的位置,使其在主元素上正确居中。
不错
差
- 由于边框的其他部分还在(透明)需要根据形状调整父元素的大小并设置
overflow: hidden;
- 要更改形状的边框宽度,您需要重新定位
::after
元素
您也可以同时使用伪元素 ::before
和 ::after
来创建形状并通过大小和边距轻松调整位置(感谢 Temani 在评论中指出这一点):
.shape {
position: relative;
width: 400px;
height: 400px;
}
.shape::before,
.shape::after {
content: '';
position: absolute;
border-radius: 100%;
right: 0;
left: 0;
bottom: 0;
top: 0;
}
.shape:before {
border: 100px solid transparent;
border-top-color: #375c89;
}
.shape::after {
margin: 5px 12px;
border: 90px solid transparent;
border-top-color: #4f81bc;
height: 45%;
}
<div class="shape"></div>
如何让这个形状只用css
我尝试过的:
.button-up {
border-top: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
border-bottom: 35px solid transparent;
width: 200px;
}
<div class="button-up"></div>
我会选择一些 linear/radial-gradient
这样的:
.box {
width:200px;
height:200px;
border-radius:50%;
background:
linear-gradient(-30deg, white 50%,transparent 50.5%),
linear-gradient(30deg, white 50%,transparent 50.5%),
radial-gradient(farthest-side at center,transparent 40%,blue 41%);
}
<div class="box">
</div>
带边框:
.box {
width:200px;
height:200px;
border-radius:50%;
background:
linear-gradient(to top,white 58.5%,transparent 60%),
linear-gradient(-30deg, white calc(50% - 4px),green calc(50% - 4px) 50%,transparent 0),
linear-gradient(30deg, white calc(50% - 4px),green calc(50% - 4px) 50%,transparent 0),
radial-gradient(farthest-side at center,
transparent calc(42% - 5px),
green calc(42% - 4px) 42%,
blue 42% calc(100% - 4px),green calc(100% - 3px));
}
<div class="box">
</div>
你也可以考虑SVG,这样更简单:
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' width='300' height='300' fill='blue'>
<path stroke="green" stroke-width=1 d='M24 32 C28 28 37 28 40 32 L52 22 C38 8 26 8 12 22 Z' />
</svg>
这是 clip-path
的另一个想法:
.box {
width:200px;
height:200px;
border-radius:50%;
background:
radial-gradient(farthest-side at center,transparent 40%,blue 41%);
clip-path: polygon(0 0,0 10%, 50% 50%, 100% 10%,100% 0);
}
<div class="box">
</div>
相关问题:
如果您更喜欢边框方法而不是 SVG 或渐变,这里有一种仅使用 border-radius
, the pseudo element ::after
and some positioning:
.shape,
.shape::after {
position: absolute;
border-radius: 100%;
}
.shape {
height: 200px;
width: 200px;
border: 100px solid transparent;
border-top: 100px solid #375c89;
}
.shape::after {
content: '';
height: 190px;
width: 198px;
top: -95px;
left: -89px;
border: 90px solid transparent;
border-top: 90px solid #4f81bc;
}
<div class="shape"></div>
工作原理
您可以分两步创建此形状。
第 1 步:使用 border-radius: 100%
创建一个甜甜圈段,使其成为圆形。然后只对顶部边框应用颜色并使其他边框透明。这样你就得到了一个圆段。现在给你的元素一个 width
和一个大于 0 的 height
来将圆圈变成一个甜甜圈。
第 2 步:将相同的样式应用于伪元素 ::after
,但给它的 width
、height
和边框稍微少一些宽度。根据您的需要调整值。现在用 position: absolute
定位两个元素,以调整重叠伪元素的位置,使其在主元素上正确居中。
不错
差
- 由于边框的其他部分还在(透明)需要根据形状调整父元素的大小并设置
overflow: hidden;
- 要更改形状的边框宽度,您需要重新定位
::after
元素
您也可以同时使用伪元素 ::before
和 ::after
来创建形状并通过大小和边距轻松调整位置(感谢 Temani 在评论中指出这一点):
.shape {
position: relative;
width: 400px;
height: 400px;
}
.shape::before,
.shape::after {
content: '';
position: absolute;
border-radius: 100%;
right: 0;
left: 0;
bottom: 0;
top: 0;
}
.shape:before {
border: 100px solid transparent;
border-top-color: #375c89;
}
.shape::after {
margin: 5px 12px;
border: 90px solid transparent;
border-top-color: #4f81bc;
height: 45%;
}
<div class="shape"></div>