我正在处理自定义形状,并且非常确定我可以使用径向渐变CSS函数来实现它。到目前为止,我已经完成了一半的工作,看起来像这样:
...使用此CSS代码:
.block {
width: 600px;
height: 200px;
position: relative;
margin: 50px auto;
z-index: 1000;
background-image: -moz-radial-gradient(
-23px 50%, /* the -23px left position varies by your "gap" */
circle closest-corner, /* keep radius to half height */
transparent 0, /* transparent at center */
transparent 55px, /*transparent at edge of gap */
transparent 56px, /* start circle "border" */
white 57px /* end circle border and begin color of rest of background */
);
background-image: -webkit-radial-gradient(-23px 50%, circle closest-side, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, transparent 56px, white 57px);
background-image: -ms-radial-gradient(-23px 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, transparent 56px, white 57px);
background-image: -o-radial-gradient(-23px 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, transparent 56px, white 57px);
background-image: radial-gradient(-23px 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, transparent 56px, white 57px);
}
现在,我想在右上角制作相同的圆形(与左上角的圆形对称)。我尝试用逗号分隔径向梯度函数,但是找不到使它与另一个对称的方法...能帮上忙吗?
谢谢!
您可以按照以下步骤进行操作。 2个背景层,每个背景层取一半的宽度(比一半大一点,以避免产生间隙问题)
.box {
width:400px;
height:200px;
margin:20px auto;
background:
radial-gradient(circle at left, transparent 50px,white 51px) left,
radial-gradient(circle at right,transparent 50px,white 51px) right;
background-size:51% 100%;
background-repeat:no-repeat;
}
body {
background:blue;
}
<div class="box">
</div>
如下所示,如果您想控制圆的原点:
.box {
width:400px;
height:200px;
margin:20px auto;
background:
radial-gradient(circle at -23px 50%,transparent 50px,white 51px) left,
radial-gradient(circle at calc(100% + 23px) 50%,transparent 50px,white 51px) right;
background-size:51% 100%;
background-repeat:no-repeat;
}
body {
background:blue;
}
<div class="box">
</div>
并且使用CSS变量可以更好地控制并避免重复相同的代码:
.box {
--rad:transparent 50px,white 51px; /* Gradient*/
/* Position */
--x:-23px;
--y:50%;
/**/
width:400px;
height:200px;
margin:20px auto;
background:
radial-gradient(circle at var(--x) var(--y),var(--rad)) left,
radial-gradient(circle at calc(100% - var(--x)) var(--y),var(--rad)) right;
background-size:51% 100%;
background-repeat:no-repeat;
}
body {
background:blue;
}
<div class="box">
</div>
没有at
的另一种语法,可以更好地支持浏览器(safari doesn't support it)
.box {
--rad:transparent 50px,white 51px; /* Gradient*/
/* Position */
--x:-23px;
--y:50%;
/**/
width:400px;
height:200px;
margin:20px auto;
background:
radial-gradient(circle,var(--rad)) left calc(150% + var(--x)) top var(--y),
radial-gradient(circle,var(--rad)) right calc(150% + var(--x)) top var(--y);
background-size:150% 200%;
background-repeat:no-repeat;
}
body {
background:blue;
}
<div class="box">
</div>
具有伪元素和比例尺的另一种想法,您只需要一个渐变:
.box {
width:400px;
height:200px;
margin:20px auto;
position:relative;
}
.box::before,
.box::after{
content:"";
position:absolute;
top:0;
left:0;
bottom:0;
width:50%;
background:radial-gradient(circle at -23px 50%,transparent 50px,white 51px);
}
.box::after {
transform:scaleX(-1);
transform-origin:right;
}
body {
background:blue;
}
<div class="box">
</div>