HTML / CSS：将阴影添加到剪辑路径不起作用

Question

我想在我的剪切路径中添加阴影，但是如果包裹它，它将消失。

这是我想要的结果（必须是剪切路径的阴影）：

.question-card {
  background-color: silver;
  border-radius: 0.25em;
  height: 100px; 
  width: 200px;
  -webkit-box-shadow: -1px 1px 7px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: -1px 1px 7px 0px rgba(0,0,0,0.75);
  box-shadow: -1px 1px 7px 0px rgba(0,0,0,0.75);
}

.inset {
  height: 40px;
  width: 20px;
  background-color: inherit;
  position: absolute;
  top: 40px;
  left: 208px;
  clip-path: inset(0 0 0 0);
  border-radius: 0 0.25em 0.25em 0;
}

.inset-wrap {
  filter: drop-shadow(-1px 1px 7px 0px rgba(0,0,0,0.75));
}

<div class="question-card">

    <span class="inset"></span>

</div>

这是当我尝试添加阴影以使其消失的结果吗？：

.question-card {
  background-color: silver;
  border-radius: 0.25em;
  height: 100px; 
  width: 200px;
  -webkit-box-shadow: -1px 1px 7px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: -1px 1px 7px 0px rgba(0,0,0,0.75);
  box-shadow: -1px 1px 7px 0px rgba(0,0,0,0.75);
}

.inset {
  height: 40px;
  width: 20px;
  background-color: inherit;
  position: absolute;
  top: 40px;
  left: 208px;
  clip-path: inset(0 0 0 0);
  border-radius: 0 0.25em 0.25em 0;
}

.inset-wrap {
  filter: drop-shadow(-1px 1px 7px 0px rgba(0,0,0,0.75));
}

<div class="question-card">
    <span class="inset-wrap">
        <span class="inset"></span>
    </span>

</div>

Answer 1

.question-card {
  background-color: silver;
  border-radius: 0.25em;
  height: 100px; 
  width: 200px;
  -webkit-box-shadow: -1px 1px 7px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: -1px 1px 7px 0px rgba(0,0,0,0.75);
  box-shadow: -1px 1px 7px 0px rgba(0,0,0,0.75);
}

.inset {
  height: 40px;
  width: 20px;
  background-color: silver;
  position: absolute;
  top: 40px;
  left: 208px;
  clip-path: inset(0 0 0 0);
  border-radius: 0 0.25em 0.25em 0;
}

.inset-wrap {
  filter: drop-shadow(-1px 1px 7px 0px rgba(0,0,0,0.75));
}

<div class="question-card">
    <span class="inset-wrap">
        <span class="inset"></span>
    </span>

</div>