使用 CSS 径向渐变创建自定义形状

Question

我正在处理一个自定义形状，我很确定我可以使用径向渐变 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);
}

现在，我想在右上角制作相同的圆形（与左角的圆形对称）。我尝试用逗号分隔我的径向梯度函数，但找不到一种使其与另一个对称的方法......你能帮忙吗？

谢谢！

Answer 1

你可以像下面那样做。 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>