web-dev-qa-db-ja.com

リバースクリップパスを作成する-CSSまたはSVG

私は本質的にCSSクリップパスの逆であるものを作成しようとしています。クリップパスを使用すると、画像またはdivがクリップされ、指定した形状のみが残り、残りの背景が効果的に削除されます。

シェイプをクリップすると、基本的に最上層に穴が開いて、背景ではなくシェイプが削除されるようにしたいと思います。これは可能ですか？私もSVGソリューションを受け入れたいと思いますが、SVGは初めてなので、親切にしてください:)

基本的に、以下のコードでは、青い正方形が赤い正方形の完全に内側に配置されており、青い正方形から形状を打ち抜いて、下の赤い層が以前の形状を示しているようにしたいです。実際には背景レイヤーとして画像があるので、私が望むものを模倣する疑似効果を受け入れることはできませんが、実際には形状を打ち抜くことはありません。

どんな援助も素晴らしいでしょう！

codepen： 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>
htmlcsssvgclip-path
5
The Chewy

画像を配置することができます上青い部分に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 {
  width: 100%;
  height: 100%;
  background: url(https://lorempixel.com/400/400/) center/cover;
  top: 0;
  left: 0;
  position: absolute;
  z-index:1;
  clip-path:polygon(10% 10%, 10% 90%, 90% 50%);
}
<div id="box">
  <div id="innerbox"></div>
</div>

もう1つのアイデアは、複数の背景を検討することです。これにより、クリップパスよりもサポートが向上し、コードも少なくなります。

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

#box {
  margin: auto;
  position: relative;
  width: 33%;
  height: 200px;
  background: 
    linear-gradient(to bottom right,transparent 49%,blue 50%) bottom/100% 60%,
    linear-gradient(to top right,transparent 49%,blue 50%) top/100% 60%,
    linear-gradient(blue,blue) left/20% 100%,
    url(https://lorempixel.com/400/400/) center/cover;
  background-repeat:no-repeat;
}
<div id="box">
</div>

[〜＃〜]更新[〜＃〜]

不透明度が必要な場合は、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 {
  width: 100%;
  height: 100%;
  background: url(https://lorempixel.com/400/400/) center/cover;
  top: 0;
  left: 0;
  position: absolute;
  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
Temani Afif

これはグーグルで上位にランクされており、答えは私の問題を解決しませんでした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://lorempixel.com/400/400/) center/cover;
  z-index: -1;
}
<div id="background">
  <div id="clip"></div>
</div>

便宜上、clip-divを画像の内側に配置しましたが、外側に配置することもできます。

0
MiXT4PE