如何使用clip-path在多边形中组合圆并添加阴影
如何使用clip-path在多边形中组合圆并添加阴影
提问于 2021-05-04 09:31:42
我刚开始使用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来实现这一点呢？是否也可以在这个剪切的蒙版上添加一个阴影？正如您在代码片段中所看到的，阴影并不真正起作用。
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-05-04 11:41:01
可以使用遮罩图像属性和径向渐变来“切割孔”。
这段代码使用了您的代码，但用圆形径向渐变蒙版替换了剪辑路径。显然，您可以根据所需的孔大小更改百分比。
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);
}<div class="ticket"></div>
(body被赋予了一个背景，只是为了证明孔已经被切割，而不是绘制了白色圆圈，这是伪元素会发生的情况)。
长方体阴影更有问题，因为它被遮蔽了(或者像问题的代码中那样被裁剪)。Box-shadow on element with -webkit-mask-image的想法是在一个包含遮罩图像作为背景图像的元素上放置阴影，但在孔洞中放置阴影仍然是一个问题。也许只要放一个稍大一点的渐变灰色/透明背景的容器就足够了，“洞”会改变透明的灰度，而不仅仅是透明的。不过看起来有点老生常谈。
Stack Overflow用户
发布于 2021-05-04 19:02:54
如果它只是一个纯色，背景可以做到：
.ticket {
background:
radial-gradient(circle 20px at right, #0000 97%,blue) right,
radial-gradient(circle 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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67377685
复制相关文章
相似问题
腾讯云开发者
