一起创建倒置的边框半径和盒子阴影

Question

我想创建一个类似于以下的倒置边框半径：

然而，由于box-shadow. 我尝试了很多解决方案，例如使用box-shadowinset 或过滤器，drop-shadow但clip-path没有很好的效果。

我在这一点上：

body {
  height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: white;
}

.wrapper {
  width: 100%;
  //filter: drop-shadow(0 0 2rem #0000005c);
}

.header {
   background-color: #efefef;
   width: 85%;
   aspect-ratio: 16/3;
   border-radius: 1.5rem;
   border: 1px solid #d0d0d0;
   box-shadow: 0 0 2rem #0000005c;
  position: relative;
  margin: 0 auto;
  //clip-path: url(#myClip);
}

.dashed {
    width: 100%;
    position: absolute;
    top: 50%;
    border-bottom: 1px dashed black;
}

  
  .dashed:after {
    content: '';
    position: absolute;
    width: 8rem;
    height: 4rem;
    background: white;
    left: -7rem;
    top: -2rem;
    border-radius: 0 2rem 2rem 0;
    box-shadow: 0 0 2rem #0000005c inset;
    clip-path: inset(0 0 0 80%);
  }

<div class="wrapper">
  <div class="header">
    <div class="dashed"></div>
  </div>
</div>

<!--
<svg width="0" height="0">
  <defs>
    <clipPath id="myClip">
        <circle cx="50" cy="50" r="50" />
<rect width = "10000" height = "10000"
    </clipPath>
  </defs>
</svg>
-->

我也尝试过使用 a svgwith multipleclip-path来引用它css。

原始完整图像：

Answer 1

您可以使用考虑渐变着色的简化代码：

body {
  background: silver
}

.dashed {
  width: 90%;
  height: 200px;
  margin: 50px auto;
  min-width: 250px;
  background: 
    radial-gradient(50px at left , #0000 98%, #fff) left, 
    radial-gradient(50px at right, #0000 98%, #fff) right;
  background-size: 51% 100%;
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 2rem black);
}

<div class="dashed"></div>