创建反向剪切路径- CSS或SVG

v1uwarro  于 2023-01-18  发布在  其他
关注(0)|答案(3)|浏览(269)

我试图创建一个CSS clip-path的反向路径，当使用clip-path时，图像或div被剪切，这样只有你指定的形状保留，而其余的背景被有效地删除。
我希望这样，如果我剪辑一个形状，它基本上打了一个洞，在最上层，并删除形状，而不是背景。这是可能的吗？我也会开放的SVG解决方案，但我是新的SVG，所以要善良：）
基本上，在下面的代码中，我有一个蓝色的方块完全位于红色方块的内部，并希望能够冲压出蓝色方块的形状，以便下面的红色图层显示通过形状曾经是。在现实中，将有一个图像作为背景图层，所以我不能接受一个伪效果，模仿我想要的，但实际上并没有冲压出形状。
任何帮助都将是惊人的!
代码编号：https://codepen.io/emilychews/pen/GQmyqx

body {
  width: 100%; 
  height: 100vh;
  padding: 0; margin: 0;
  display: flex;
  }

#box {
  margin: auto;
  position: relative;
  width: 33%;
  height: 200px;
  background: red;
}

#innerbox {
  width: 100%;
  height: 100%;
  background: blue;
  top: 0;
  left: 0;
  position: absolute;
}
<div id="box">
  <div id="innerbox"></div>
</div>
css

3条答案

按热度按时间
6ljaweal

6ljaweal1#

您可以将图像放在蓝色部分的上方，并在其上应用clip-path，然后结果将与在蓝色部分内创建一个孔以查看下方的图像相同：

body {
  width: 100%; 
  height: 100vh;
  padding: 0; margin: 0;
  display: flex;
  }

#box {
  margin: auto;
  position: relative;
  width: 33%;
  height: 200px;
  background: blue;
}

#innerbox {
  background: url(https://picsum.photos/400/400/) center/cover;
  position: absolute;
  inset: 0;
  z-index:1;
  clip-path:polygon(10% 10%, 10% 90%, 90% 50%);
}
<div id="box">
  <div id="innerbox"></div>
</div>

另一个想法是考虑多个背景，你会有比clip-path更好的支持，也更少的代码：
一个二个一个一个

    • 更新**

如果你想要一些透明度，这里有一个想法，你必须使用clip-path复制内容（缺点）：

body {
  width: 100%; 
  height: 100vh;
  padding: 0; margin: 0;
  display: flex;
  }

#box {
  margin: auto;
  position: relative;
  width: 33%;
  height: 200px;
  background: blue;
}

#innerbox,#innerbox-2 {
  background: url(https://picsum.photos/400/400/) center/cover;
  position: absolute;
  inset: 0;
  z-index:2;
}
#innerbox {
  /* if you initially planned to have x opacity so you need to set 1-x here*/
  opacity:0.4;
}

#innerbox-2 {
  z-index:1;
  clip-path:polygon(10% 10%, 10% 90%, 90% 50%);
  animation:animate 5s linear alternate infinite;
}

@keyframes animate {
  from {
    clip-path:polygon(10% 10%, 10% 90%, 90% 50%);
  }
  to {
     clip-path:polygon(20% 50%, 90% 50%, 80% 10%);
  }
}
<div id="box">
  <div id="innerbox">
    <h1>Title</h1>
    <p>Some content</p>
  </div>
  <div id="innerbox-2">
    <h1>Title</h1>
    <p>Some content</p>
  </div>
</div>
    • 更新2**

您可以考虑SVG来满足您的初始需求，只需使用SVG而不是div（您将在其中使用掩码）即可。

body {
  width: 100%; 
  height: 100vh;
  padding: 0; margin: 0;
  display: flex;
  }

#box {
  margin: auto;
  position: relative;
  width: 33%;
  height: 200px;
  background: blue;
  background: url(https://picsum.photos/400/400/) center/cover;
}

#innerbox {
  position: absolute;
  inset: 0;
  z-index:1;
}
<div id="box">
  <svg viewBox="0 0 200 200" id="innerbox" preserveAspectRatio="none">
  <defs>
    <mask id="hole">
      <rect width="100%" height="100%" fill="white"/>
      <!-- the hole defined a polygon -->
      <polygon points="20,20 20,180 180,100 " fill="black"/>
    </mask>
  </defs>
  <!-- create a rect, fill it with the color and apply the above mask -->
  <rect fill="blue" width="100%" height="100%" mask="url(#hole)" />
</svg>
</div>

您也可以使用相同的SVG作为背景：

body {
  width: 100%; 
  height: 100vh;
  padding: 0; margin: 0;
  display: flex;
  }

#box {
  margin: auto;
  position: relative;
  width: 33%;
  height: 200px;
  background: blue;
  background: url(https://picsum.photos/400/400/) center/cover;
}

#innerbox {
  position: absolute;
  inset: 0;
  z-index:1;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none"><defs><mask id="hole"><rect width="100%" height="100%" fill="white"/> <polygon points="20,20 20,180 180,100 " fill="black"/></mask></defs><rect fill="blue" width="100%" height="100%" mask="url(%23hole)" /></svg>');
}
<div id="box">
  <div id="innerbox"></div>
</div>
    • 更新3（我在2020年的建议）**

您可以使用CSS遮罩来获得您想要的效果与mask-composite

body {
  width: 100%; 
  height: 100vh;
  padding: 0; margin: 0;
  display: flex;
  }

#box {
  margin: auto;
  position: relative;
  width: 33%;
  height: 200px;
  background: url(https://picsum.photos/400/400/) center/cover;
}

#innerbox {
  position: absolute;
  inset: 0;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none"><polygon points="20,20 20,180 180,100 " fill="black"/></svg>') 0/100% 100%;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none"><polygon points="20,20 20,180 180,100 " fill="black"/></svg>') 0/100% 100%;
  background: blue;
}
<div id="box">
  <div id="innerbox"></div>
</div>

而倒置的版本使用相同的形状
一个12b1x一个13b1x

赞(0）分享  回复(0）举报  2023-01-18
bkhjykvo

bkhjykvo2#

这在谷歌排名很高，答案并没有解决我的问题b/c我不能触摸我的背景图像，所以这里是另一种方法来做到这一点：
创建一个带有剪贴路径的框架。

body {
  width: 100%;
  height: 100vh;
  padding: 0;
  margin: 0;
  display: grid;
  place-items: center;
}

#clip,
#background {
  width: 400px;
  height: 400px;
}

#clip {
  clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%);
  position: absolute;
  background: #fff;
  opacity: 0.8;
}

#background {
  background: url(https://picsum.photos/400/400/) center/cover;
  z-index: -1;
}
<div id="background">
  <div id="clip"></div>
</div>

我把clip-div放在图片里面是为了方便，但是你也可以把它放在图片外面，但是要确保你能接受浏览器对clip-path的有限支持。

赞(0）分享  回复(0）举报  2023-01-18
a64a0gku

a64a0gku3#

要在var（）和calc（）的帮助下扩展@leonheess的伟大工作，您可以设置x/y/width/height的变量，并根据js熟悉的属性轻松地在正方形中移动。

#clip-container {
  --windowposition-x: 50px;
  --windowposition-y: 50px;
  --windowposition-height: 100px;
  --windowposition-width: 100px;
}

body {
  width: 100%;
  height: 100vh;
  padding: 0;
  margin: 0;
  display: grid;
  place-items: center;
  background: url(https://picsum.photos/400/400/) center/cover;

}

#clip-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(197, 185, 185, 0.7);
  clip-path: polygon(0% 0%,
        0% 100%,
        var(--windowposition-x) 100%,
        var(--windowposition-x) var(--windowposition-y),
        calc(var(--windowposition-x) + var(--windowposition-width)) var(--windowposition-y),
        calc(var(--windowposition-x) + var(--windowposition-width)) calc(var(--windowposition-y) + var(--windowposition-height)),
        var(--windowposition-x) calc(var(--windowposition-y) + var(--windowposition-height)),
        var(--windowposition-x) 100%,
        100% 100%,
        100% 0%);
}
<div id="clip-container"></div>

如果你真的愿意，你甚至可以更进一步，在html中定义你的css变量，比如：
一个二个一个一个

赞(0）分享  回复(0）举报  2023-01-18
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com