Is There an Inverse to The CSS "Clip" Property; Hide The Clipped Area

Create a Reverse Clip-Path - CSS or SVG

You can put the image above the blue part and you apply the clip-path on it then the result will be the same as if you have created a hole inside the blue part to see the image below:

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>

Is there an ability to position clip-path from right edge?

You need to consider percentage value:

.box {  width:150px;  height:150px;  background:red;  clip-path: circle(50px at 100% 50%); /* left 100% (right) top 50% (center)*/    /* 0    0    = left top     0    100% = left bottom     100% 0    = right top     100% 100% = right bottom     ... and so on  */}
<div class="box">
</div>

View the inverse region of clip-path

Use a mask instead. The black parts of the mask show the background, white displays the shape itself.

svg {  border: 3px dashed #999;background-color:blue;fill:blue;}svg > rect:hover {  fill: green;}
<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">  <defs>    <mask id="myMask">      <rect width="100%" height="100%" fill="white"/>      <circle cx="30" cy="30" r="20" fill="black"/>    </mask>  </defs>
<rect x="10" y="10" width="100" height="100" fill="white" mask="url(#myMask)"/></svg>

Clippingmask from text and its parent div

The background-clip: text property cuts everything except the text away from the background, leaving the text colored/filled with the background color/image. (If you set text color to transparent of course.)

You want the opposite of that. But since there is no true inverse of background-clip: text, you can use the trick they use here.

Method 1: CSS trick to make it look like cut-out text

What it does is making you think the text is transparent by filling/coloring it with the same background and putting some other content in between to make the distinction.

On your screen you would see for example:

  1. Red background. (Created with a ::after element.)
  2. A smaller black element (leaving the red background element visible around it). (Created with ::before element.)
  3. Red text on top. (The original element.)

Now it seems that the text is transparent, because it has the same fill as the red background element. So the trick is to have text and the background have the same fill and size and position the fill the same way.

Working example:

/*
Contains only the text that is
filled/colored with the background.
*/
.cut-out-text {
position: relative;
font-size: 100px;
font-weight: bold;
padding: 50px;
background: linear-gradient(to right, red, blue);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}

/*
Layer in between. (Black in this case.)
This layer is sized just a bit smaller than the
container to leave the `::after` visible around.
*/
.cut-out-text::before {
content: '';
display: inline-block;
position: absolute;
z-index: -1;
top: 10px;
right: 10px;
bottom: 10px;
left: 10px;
background: #000;
}

/*
Layer that repeats the original background
and appears to be the real background,
making it look like the text is cut out.
*/
.cut-out-text::after {
content: '';
display: inline-block;
position: absolute;
z-index: -2;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: inherit;
background-image: inherit;
}
<div class="cut-out-text">Hello World</div>

invert SVG clip (show only outside path)

Following the link in Duopixel's comment, the problem can be solved using a mask:

<svg width="50%" height="50%" viewbox="0 0 985 740" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">  <defs>    <rect id="sa11" x="763.0" y="176.5" width="70.0" height="25.0" rx="50" ry="50" />    <rect id="sa12" x="516.0" y="127.5" width="70.0" height="25.0" rx="50" ry="50" />  </defs>  <mask id="re8-clip">    <rect id="bg" x="0" y="0" width="100%" height="100%" fill="white"/>    <use xlink:href="#sa11" fill="Black" />    <use xlink:href="#sa12" fill="Black" />  </mask>  <use xlink:href="#sa11" fill="ForestGreen" />  <use xlink:href="#sa12" fill="ForestGreen" />  <path stroke="Black" stroke-width="1.5" fill="none" d="M 798.0 189.0 551.0 140.0" mask="url(#re8-clip)"/></svg>


Related Topics



Leave a reply



Submit