如何有透明的sc角？

Question

我需要创建一张卡片，该卡片的左边框为圆角。我以某种方式实现了它，但仅适用于白色背景。请参见下面的代码。 我想在不同背景上使用该卡。这张卡可以让我进入嵌套的DOM。

如何使其与任何背景兼容？

我创建了此代码片段以了解该问题。

.card.border {
  margin-left: -4px;
  margin-right: -4px;
  border-radius: 16px;
  background: #4c4c4c;
  border: 4px solid #4c4c4c;
}
.card-section {
  border: 1px solid #d6d6d6;
  padding: 24px;
  border-radius: 16px;
  background-color: #fff;
  height: 100px;
}
.card .card-separator {
  height: 2px;
  width: 100%;
  background-image: linear-gradient(to right, #d6d6d6 50%, transparent 50%), linear-gradient(to right, #d6d6d6 50%, transparent 50%), linear-gradient(to bottom, #d6d6d6 50%, transparent 50%), linear-gradient(to bottom, #d6d6d6 50%, transparent 50%);
  background-position: left top, left bottom, left top, right top;
  background-position-x: left, left, left, right;
  background-position-y: top, bottom, top, top;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 20px 3px, 20px 3px, 3px 20px, 3px 20px;
  margin-top: 24px;
  margin-bottom: 16px;
  color: #d6d6d6;
}
.card .card-separator::before {
    content: "";
    display: flex;
    background: #fff;
    position: relative;
    border-width: 4px 4px 4px 0;
    border-style: solid;
    height: 24px;
    width: 12px;
    border-bottom-right-radius: 24px;
    border-top-right-radius: 24px;
    left: -29px;
    top: -12px;
    border-color: #4c4c4c;;
}
.padding-20{
  padding: 20px;
}
.red-bg{
  background: #9e9e9e;
  padding:20px;
}

  <div class="padding-20">
  <div class="card border">
    <div class="card-wrapper">
      <div class="card-section">
    content above
        <div class="bottom-contianer">
          <div>
            <div class="card-separator"></div>
            content below
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
  <div class="red-bg">
    <div class="card border">
    <div class="card-wrapper">
      <div class="card-section">
    content above
        <div class="bottom-contianer">
          <div>
            <div class="card-separator"></div>
            content below
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>