是否可以在使用径向渐变的卡片上创建颜色渐变背景？

Question

我想让卡片看起来像这样

预期：bg颜色是渐变的（img后面的绿色）

实际：实际背景颜色不是渐变，只接受一种颜色（不是渐变）

我想要的颜色是渐变

linear-gradient(300deg, #6DBF67 1.06%, #A8DAA4 100%)

但实际上我无法制作渐变。可以做渐变吗？我需要径向渐变和过滤器，卡片的侧面看起来像票卡。

我的代码：

.App {
  font-family: sans-serif;
  text-align: center;
}

.flex {
  display: flex;
  align-items: center;
}

.section-left {
  width: 100%;
  height: 100%;
  max-width: 64px;
  max-height: 53px !important;
  min-height: 53px !important;
  background: radial-gradient(8px at left, #0000 98%, #6dbf67) left;
  background-size: 100% 64px;
  background-position: top -70px left;
  background-repeat: repeat-y;
  filter: drop-shadow(-2px 2px 3px rgba(0, 0, 0, 0.1));
  border-radius: 8px 0 0 8px;
  /* padding: 10px 16px; */
}

.wrapper-img {
  width: 32px !important;
  height: 32px !important;
  border-radius: 100%;
  background: white;
  text-align: center;
  /* vertical-align: middle; */
  background-color: white;
  /* padding: 5px; */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

.section-right {
  width: 100%;
  height: 100%;
  max-height: 53px;
  background: radial-gradient(8px at right, #0000 98%, #fff) right;
  background-size: 100% 55px;
  background-position: top -1px right;
  background-repeat: repeat-y;
  filter: drop-shadow(3px 2px 3px rgba(0, 0, 0, 0.1));
  // box-shadow: 3px 3px 5px -1px rgba(0, 0,0,0.12);
  border-radius: 0 8px 8px 0;
  padding: 16px 12px;
}

.title {
  margin: 0;
}

<div className="container">
  <div className="flex">
    <div className="section-left">
      <div className="wrapper-img">
        <img src="https://d3hi9gzi0oybee.cloudfront.net/assets/e-commerce/icons/ic-otten-point.svg" width="21px" height="21px" />
      </div>
    </div>
    <div className="section-right">
      <div className="flex-sb">
        <h4 className="title">Title</h4>
      </div>
    </div>
  </div>
</div>

这是我的沙盒，请看一下卡票。谢谢你

Answer 1

使用蒙版创建圆形切口，然后您可以轻松应用其他渐变：

.box {
  --r: 20px; /* radius of cut */

  height: 100px;
  margin: 10px;
  border-radius: 10px;
  -webkit-mask: radial-gradient(var(--r) at var(--r),#0000 97%,#000) calc(-1*var(--r));
  
  background: linear-gradient(red,purple);
}

<div class="box"></div>