带圆圈的剪辑元素，删除div的部分，打孔效果

Question

我有这张卡片布局Codepen card layout <div></div>，我想在其中创建一个打孔效果＆＃34;。卡片从两侧丢失半圆形位，背景中显示模糊背景。

我尝试在卡元素本身上使用伪元素，并使其继承背景以给出负空间的错觉。以及使用clip-path，但这似乎做了我想要的逆操作。我想保留大部分卡片，然后擦掉它的一部分。不知道该怎么称呼它或如何搜索它，任何和所有建议都非常感谢！

Answer 1

如果符合您的需求，您可以使用clip-path作为自定义路径。

这是一个例子：

＆＃13;

＆＃13;

.clip {
  width: 300px;
  height: 160px;
  background-color: red;
  clip-path: polygon(0% 0%, 100% 0%, 100% 40%, 99% 41%, 98% 42%, 97% 44%, 96% 48%, 96% 50%, 96% 52%, 97% 56%, 98% 58%, 99% 59%, 100% 60%, 100% 100%, 0% 100%, 0% 60%, 1% 59%, 2% 58%, 3% 56%, 4% 52%, 4% 50%, 4% 48%, 3% 44%, 2% 42%, 1% 41%, 0% 40%);
}

＆＃13;

<div class="clip"></div>

＆＃13;

＆＃13;

＆＃13;

查看此多边形以了解您的回答问题：

＆＃13;

＆＃13;

.clip {
  width: 300px;
  height: 160px;
  background-color: red;
  clip-path: polygon(0% 0%, 100% 0%, 100% calc(50% - 18px), calc(100% - 5px) calc(50% - 15px), calc(100% - 8px) calc(50% - 12px), calc(100% - 9px) calc(50% - 9px), calc(100% - 10px) calc(50% - 7px), calc(100% - 11px) 50%, calc(100% - 10px) calc(50% + 7px), calc(100% - 9px) calc(50% + 9px), calc(100% - 8px) calc(50% + 12px), calc(100% - 5px) calc(50% + 15px), 100% calc(50% + 18px), 100% 100%, 0% 100%, 0% calc(50% + 18px), 5px calc(50% + 15px), 8px calc(50% + 12px), 9px calc(50% + 9px), 10px calc(50% + 7px), 11px 50%, 10px calc(50% - 7px), 9px calc(50% - 9px), 8px calc(50% - 12px), 5px calc(50% - 15px), 0% calc(50% - 18px));
}

＆＃13;

<div class="clip"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

.target {
  clip-path: url(resources.svg#c1);
}

我认为你走在正确的轨道上，尝试使用SVG来定义剪裁区域。 https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

Answer 3

有点晚了，但是我想和您分享这个解决方案：

.shape {
  width: 275px;
  height: 300px;
  position: relative;
  background-color: transparent;
}

.shape-left, .shape-right {
  width: 50%;
  height: 100%;
  position: absolute;
  overflow: hidden;
}

.circle {
    position: absolute;
    box-sizing: content-box;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    border: 100vh solid white;
    top: 50%;
}

.shape-left {
  left: 0;
}

.shape-left .circle {
  left: 0;
  transform: translate(-50%, -50%);
}
  
.shape-right {
  right: 0;
}

.shape-right .circle {
  right: 0;
  transform: translate(50%, -50%);
}

body {
  background-image: url(https://images.pexels.com/photos/2318554/pexels-photo-2318554.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
  background-size: cover;
  background-position: 50% 50%;
}

<div class="shape">
  <div class="shape-left"><div class="circle"></div></div>
  <div class="shape-right"><div class="circle"></div></div>
</div>

所以基本上我所做的是：

1. 创建没有背景的矩形
2. 创建一个没有背景和隐藏溢出的“左”和“右”子元素，都填充了矩形的一半
3. 给两个孩子一个没有背景的元素
4. 将元素设置为圆形
5. 将“ left”和“ right”元素内的圆对齐到您喜欢“被裁剪”的矩形的位置
6. 为圈子提供一个超大的边框（以便填充整个父元素）和您选择的边框颜色

tada ** 如果难以理解，请更改border元素上.circle的大小。这将有助于理解。

Answer 4

我已经找到了更接近我想要的东西。 我根据此链接html5rocks mask tutorial

修改了示例

-webkit-mask-box-image: url("stamp.svg") stretch; 
mask-border: url("stamp.svg") stretch;

我的邮票看起来与众不同，并注意我如何使用拉伸以使其不重复。 请记住，您想要透视的区域必须是＆＃34;无＆＃34;路径和您想要显示的原始html元素的部分可能只是黑色。