提问人：atul mishra 提问时间：10/17/2023 更新时间：10/17/2023 访问量：35
我想用汉堡包在中心画一条曲线，以便它采用渐变背景颜色
I want to draw a curve in center with hamburger so that it take the gradient background color
答：
3赞
Temani Afif
10/17/2023
#1
我有一个用于这种形状的在线生成器：https://css-generators.com/section-divider/
获取形状，然后将图标放在圆形部分上方：
.top {
--mask:
linear-gradient(#000 0 0) top/100% calc(100% - 50px) no-repeat,
radial-gradient(farthest-side,#000 98%,#0000) bottom/100px 100px no-repeat;
-webkit-mask: var(--mask);
mask: var(--mask);
height: 150px;
background: linear-gradient(90deg,red,blue);
}<div class="top"></div>要获得曲线，您可以按如下方式进行调整（生成器未提供）：
.top {
--s: 60px; /* control the size */
--mask:
radial-gradient(100% 100% at 100% 100%,#0000 98%,#000 101%)
calc(50% + var(--s)/2 + var(--s)/16) calc(100% - var(--s)/4)/ calc(var(--s)/4) calc(var(--s)/4) no-repeat,
radial-gradient(100% 100% at 0 100%,#0000 98%,#000 101%)
calc(50% - var(--s)/2 - var(--s)/16) calc(100% - var(--s)/4)/ calc(var(--s)/4) calc(var(--s)/4) no-repeat,
linear-gradient(#000 0 0) top/100% calc(100% - var(--s)/2) no-repeat,
radial-gradient(farthest-side,#000 98%,#0000) bottom/var(--s) var(--s) no-repeat;
-webkit-mask: var(--mask);
mask: var(--mask);
height: 100px;
background: linear-gradient(90deg,red,blue);
}<div class="top"></div>评论
0赞
atul mishra
10/17/2023
感谢您的回答：如果我想将桅杆从中心移至 250px，需要更改什么？我更改了最远的尺寸，但没有工作
评论
clip-path可以在这里提供帮助