css - 使用CSS径向渐变创建自定义形状(Creating a custom shape using CSS radial gradient)

Question

I am working on a custom shape and am pretty sure I can achieve it using the radial-gradient CSS function.

(我正在处理自定义形状，并且非常确定我可以使用径向渐变CSS函数来实现它。)

Until now, I have been able to make half of the work, which looks like this :

(到目前为止，我已经完成了一半的工作，看起来像这样：)

... using this CSS code :

(...使用此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);
}

Now, I'd like to make the same circle shape on the right corner (symmetrical to the circle shape of the left corner).

(现在，我想在右上角制作相同的圆形（与左上角的圆形对称）。)

I have tried separating my radial-gradient functions with commas but can't find a way to make it symmetrical to the other one... Can you help?

(我尝试用逗号分隔径向梯度函数，但是找不到使它与另一个对称的方法...能帮上忙吗？)

Thanks!

(谢谢！)

  ask by fraxool translate from so

Answer 1

You can do it like below.

(您可以按照以下步骤进行操作。)

2 backgrounds layer, each one taking half the width (a little bigger than the half to avoid having gap issue)

(2个背景层，每个背景层占用一半的宽度（比一半大一些，以避免产生间隙问题）)

 .box { width:400px; height:200px; margin:50px; 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> 

Like below if you want to control the origin of the circle:

(如果要控制圆的原点，则如下所示：)

 .box { width:400px; height:200px; margin:50px; 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> 

And with CSS variables for better control and avoid repeating the same code:

(并且使用CSS变量可以更好地控制并避免重复相同的代码：)

 .box { --rad:transparent 50px,white 51px; /* Gradient*/ /* Position */ --x:-23px; --y:50%; /**/ width:400px; height:200px; margin:50px; 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> 

Another syntax without the at for better browser support ( safari doesn't support it )

(没有at另一种语法可为浏览器提供更好的支持（ Safari不支持 ）)

 .box { --rad:transparent 50px,white 51px; /* Gradient*/ /* Position */ --x:-23px; --y:50%; /**/ width:400px; height:200px; margin:50px; 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> 

Another idea with pseudo element and scale where you need only one gradient:

(关于伪元素和比例的另一个想法，您只需要一个渐变：)

 .box { width:400px; height:200px; margin:50px; 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>