Creating inverted border radius and box-shadow together-CodePudding

I want to create an inverted border radius similar to:

However, it is being hard to create it due to the box-shadow. I have tried many solutions, such use box-shadow inset, or the filter drop-shadow with clip-path without good results.

I am on this point:

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>
-->

I have tried using a svg with multiple clip-path to reference it on the css as well.

Original full image:

CodePudding user response：

This is a way of doing this: for the holes at the start and the end of the ticket you can use the before and after elements. Both pseudo elements are transparent with a big white box shadow: box-shadow: 0px 0px 1px 50vw white;. Since the .dashed element has overflow:hidden you will see the box shadow of the pseudo elements only inside the .dashed and will look as if the .dashed has a white background.

For the outer shadow you can now use a drop shadow filter as you intended.

body{background:silver}

.dashed {
    width: 90%;
    height:200px;
    position: absolute;
    margin: auto;
    top: 0; bottom:0;
    left:0;right:0;
    overflow:hidden;
    min-width:250px;
  
  filter: drop-shadow(0 0 2rem black);
}

.dashed:before,.dashed:after{
  content:"";
  display:inline-block;
  width:100px;
  height:100px;
  background:none;
  border-radius:50%;
  position:absolute;
  box-shadow: 0px 0px 1px 50vw white;
}

.dashed:before{
  left:-50px;
  top:50px;
}

.dashed:after{
  left:calc(100% - 50px);
  top:50px;
}

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