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:
- Red background. (Created with a
::after
element.) - A smaller black element (leaving the red background element visible around it). (Created with
::before
element.) - 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
Selecting Children Elements But Not Grandchildren
Twitter Bootstrap Radio/Checkbox - How to Put Glyphicon
How to Stop CSS Hyphenation, No Dash Between Words
How to Make The New Facebook Post Embed Feature Responsive
Combining Ie6 and Ie7 CSS Hacks in Same Stylesheet
Center Content in a Absolute Positioned Div
Systematically Resolve Conflicting Styles in CSS
Ie8 Font-Size Toggles on: Hover - Japanese Lang Only
Sass Is Concatenating Instead of Adding
How to Select CSS Id's with Numbers in Them
CSS3 Element with Opacity:0 (Invisible) Responds to Mouse Events
Wkhtmltopdf CSS Sizes in Cm/Mm