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

【问题标题】：How can I combine a circle in a polygon using clip-path and add a shadow如何使用剪辑路径在多边形中组合一个圆并添加阴影
【发布时间】：2021-07-26 09:10:01
【问题描述】：

我不熟悉使用 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
  );
}

&lt;div class="ticket"&gt;&lt;/div&gt;

这可以使用这个属性吗？如果没有，我如何使用 SVG 来实现这一点？是否也可以为这个剪裁的蒙版添加阴影？正如您在 sn-p 中看到的那样，阴影并没有真正起作用。

【问题讨论】：

难道你不想做普通的CSS通过伪元素添加圆圈的方式吗？
有没有办法做到这一点，让它们像打孔器一样打孔，这样可以通过孔看到背景？
建议您创建要剪辑的结构的 SVG，然后使用 clip-path: url(#id) 和 svg id。

标签： html css svg

【解决方案1】：

可以使用 mask-image 属性和径向渐变来“挖洞”。

此 sn-p 使用您的代码，但将剪辑路径替换为圆形径向渐变蒙版。显然，您可以根据所需的孔大小更改百分比。

body {
  background: cyan;
}

.ticket {
  background-color: blue;
  height: 100px;
  width: 200px;
  border-radius: 10px;
  box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%);
  --mask1: radial-gradient(circle at 0 50%, transparent 0, transparent 5%, black 5%, black 90%, transparent 90%, transparent);
  --mask2: radial-gradient(circle at 100% 50%, transparent 0, transparent 5%, black 5%, black 90%, transparent 90%, transparent);
  /* webkit needed for Chrome */
  -webkit-mask-image: var(--mask1), var(--mask2);
  mask-image: var(--mask1), var(--mask2);
}

&lt;div class="ticket"&gt;&lt;/div&gt;

（主体被赋予背景只是为了证明孔已被切割，而不是绘制白色圆圈，这是伪元素会发生的情况）。

盒子阴影更成问题，因为它被遮盖（或像问题代码中那样被剪裁）。 Box-shadow on element with -webkit-mask-image 有想法在包含蒙版图像作为背景图像的包含元素上放置阴影，但在孔中放置阴影仍然是一个问题。也许只需放置一个稍大一点的带有渐变灰色/透明背景的容器就足够了，“洞”会改变透明灰色，而不仅仅是透明。不过看起来很老套。

【讨论】：

这正是我想要的！我将继续试验阴影，看看我是否可以让它正确渲染。你介意我问你为什么面具里有黑色吗？
我认为面具中的任何颜色都可以，但我不是这方面的专家。只是当您看到 SVG 蒙版等时，它们往往是黑色和透明的。
在阴影位上，您可以在实际元素上放置阴影，在之前的伪元素上放置遮罩/背景 - 虽然需要一些参数，但我不确定它是否可以永远完美。另请参阅 [链接]codepen.io/thebabydino/pen/rbmeBY 引用的 [链接]css-tricks.com/using-box-shadows-and-clip-path-together
@Charklewis 默认的遮罩模式是 alpha，所以只有颜色的 alpha 通道是相关的，它可以是任何类型的着色（相关：stackoverflow.com/a/62387441/8620333）

【解决方案2】：

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

.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%));
}

&lt;div class="ticket"&gt;&lt;/div&gt;

【讨论】：