верстка элемента c прозрачными элементами внутри

Question

Доброго дня. Никак не могу понять как сверстать подобный блок. Основная проблема что у него тень, т.е. полукруги должны быть именно прозрачными и на них тоже должна быть тень. Фоном также накинуть нельзя, так как элемент - раскрывающийся.

Answer 1

Может это вам поможет

body{
    background-color: lightgrey;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 100vh;
    margin: 0;
  }

  .ticket{
    position: relative;
    width: 520px;
    height: 140px;
    background-color: #fff;
    border-radius: 24px;
    overflow: hidden;
  }

  .ticket:after,
  .ticket:before{
    content: "";
    position: absolute;
    width: 40px;
    height: 40px;
    display: block;
    border-radius: 50%;
    right: 150px;
    background-color: lightgrey;
  }

  .ticket:after{
    bottom: 0;
    transform: translateY(50%);
  }

  .ticket:before{
    top: 0;
    transform: translateY(-50%);
  }

<div class="ticket"></div>

Answer 2

Нарисуйте форму фоновыми градиентами, а после примените к блоку фильтр drop-shadow() (попробуйте изменить размер блока, ухватив его за правый нижний угол) :

/* Only for example --> */ body { margin: 0; padding: 5px; height: 100vh; box-sizing: border-box; background: 0% 0% / auto url("https://i.stack.imgur.com/m9NKc.png") no-repeat; }

.check {
  height: 350px; width: 975px;
  padding: 30px 20px;
  border-radius: 20px;
  box-sizing: border-box;
  
  background: right 170px center / 70px calc(100% - 70px) linear-gradient(#f00, #f00), right 240px top 0 / 100% 100% linear-gradient(#f00, #f00), right 0 top 0 / 170px 100% linear-gradient(#f00, #f00), right 170px top 0 / 70px 35px radial-gradient(circle at center top, #0000 0 29px, #f00 30px 50px), right 170px bottom 0 / 70px 35px radial-gradient(circle at center bottom, #0000 0 29px, #f00 30px 50px);
  background-repeat: no-repeat;
  
  filter: drop-shadow(0px 4px 5px #000c);
  
  /* Only for example --> */ overflow: hidden; resize: both; min-height: 70px; max-height: 100%; min-width: 425px; max-width: 100%;
}

<div class="check"></div>

БЛОГ НА HUSL

верстка элемента c прозрачными элементами внутри

Ответы (2 шт):