在CSS中制作一个带有渐变颜色到底部的弧形切口

Question

我按照链接中的代码进行操作 https://dev.to/karimshalapy/how-to-make-a-curved-cutout-to-any-element-a2j并获得完美的弧形切口。但我无法将其背景颜色更改为底部渐变颜色。下面是我的代码

.curout {
  --circle-r: 22px;
  --big-circle-r: 20px;
  --pillar-size: max(22px, var(--circle-r));
  --card-color: linear-gradient(to bottom, #1a1a1a, #8b4513);
  border-radius: 20px;
}
.card {
  --circle-offset: calc(
    var(--big-circle-r) + var(--pillar-size) + var(--circle-r)
  );
  --filler: conic-gradient(
    at right var(--circle-r) top var(--circle-r),
    #0000 25%,
    var(--card-color) 0
  );

  position: relative;
  border-top-right-radius: 0;
  background: 
    /* Big Circle Cutout */ radial-gradient(
        var(--big-circle-r) at 100% 0%,
        #0000 98%,
        var(--card-color)
      )
      calc(-1 * var(--pillar-size)) var(--pillar-size),
    radial-gradient(
      var(--circle-r) at top var(--circle-r) right var(--circle-offset),
      #00ffff 98%,
      #0000
    ),
    /* Right Circle */
      radial-gradient(
        var(--circle-r) at right var(--circle-r) top var(--circle-offset),
        #00ffff 98%,
        #0000
      ),
    var(--filler) calc(-1 * (var(--big-circle-r) + var(--pillar-size))) 0,
    var(--filler) 0 calc(var(--big-circle-r) + var(--pillar-size));
  background-repeat: no-repeat;
}

/* linear-gradient(to bottom, #1a1a1a, #8b4513), */

这是行不通的，如果卡片颜色是#ff0000或#00ffff就完美了。任何人都可以帮助我。谢谢

Answer 1

感谢@temaniAfif 的建议。 这是CSS代码

.inverted-radius {
  --r: 20px;
  --s: 24px;
  background: linear-gradient(to bottom, #1a1a1a, #8b4513);
  border-radius: var(--r);

  --_m: /calc(2 * var(--r)) calc(2 * var(--r)) radial-gradient(
      #000 70%,
      #0000 72%
    ) no-repeat;

  mask: right calc(var(--s) + var(--r)) top 0 var(--_m),
    right calc(var(--s) + var(--r)) var(--_m),
    radial-gradient(var(--s) at 100% 0, #0000 99%, #000 101%)
      calc(-1 * var(--r)) var(--r) no-repeat,
    conic-gradient(
      at calc(100% - var(--s) - 2 * var(--r)) calc(var(--s) + 2 * var(--r)),
      #0000 25%,
      #000 0
    );
}

这是预览