如何使用剪辑路径组合多边形中的圆并添加阴影

Question

我是使用 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
  );
}

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

使用这个属性可以吗？如果没有，我如何使用 SVG 来实现这一目标？是否也可以向这个剪切的蒙版添加阴影？正如您在片段中看到的那样，阴影并没有真正起作用。

Answer 1

如果只是纯色，背景就可以做到：

.ticket {
  background:
    radial-gradient(20px at right, #0000 97%,blue) right,
    radial-gradient(20px at left , #0000 97%,blue) left;
  background-size: 51% 100%;
  background-repeat: no-repeat;
  height: 100px;
  width: 200px;
  border-radius: 10px;
  filter: drop-shadow(0 0.5rem 0.2rem rgb(0 0 0 / 50%));
}

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