Как объединить круг в многоугольник с помощью clip-path и добавить тень ⇐ CSS

[Anonymous]

Я новичок в использовании свойства CSS clip-path и создал фигуру, которая почти соответствует моим требованиям.
Я хочу создать следующую фигуру однако я изо всех сил пытаюсь преобразовать квадраты в круги.

Код: Выделить всё

.ticket {
background-color: blue;
height: 100px;
width: 200px;
border-radius: 10px;
box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%);
clip-path: polygon(
0 0,
0% 42%,
5% 42%,
5% 58%,
0 58%,
0 100%,
100% 100%,
100% 58%,
95% 58%,
95% 42%,
100% 42%,
100% 0
);
}

Код: Выделить всё

Можно ли это использовать с помощью этого свойства? Если нет, то как я могу добиться этого, используя вместо этого SVG? Можно ли также добавить тень к этой обрезанной маске? Как вы можете видеть во фрагменте, тень на самом деле не работает.

Подробнее здесь: https://stackoverflow.com/questions/673 ... d-a-shadow