html - 如何使用剪辑路径在多边形中组合一个圆并添加阴影

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>