Ok so say i'm using the follow setup for my divs:
.background will contain an image.
.overlay will have a semitransparent white background for the overlay
.inner would effectively mask out a rectangle the size of the div? So that the background is transparent and cuts through the overlay div.
<div class="background">
<div class="overlay">
<div class="inner">
</div>
</div>
</div>
Is this possible with just css?
4 Answers
Looks like you can achieve that adding a thick border with some opacity (Fiddle). The border widths will determine size of rectangle desired:
<div class="background">
<div class="inner">
</div>
</div>
and CSS:
html, body {
height: 100%;
width: 100%;
}
.background {
width: 100%;
height: 100%;
background: url(');
}
.inner {
width: 100%;
height: 100%;
border-top: 130px solid rgba(255, 255, 255, 0.5);
border-bottom: 130px solid rgba(255, 255, 255, 0.5);
border-left: 100px solid rgba(255, 255, 255, 0.5);
border-right: 100px solid rgba(255, 255, 255, 0.5);
box-sizing: border-box;
}
YES, if you use a PNG image for the masking. It is possible to clip the background div using it's children. What you would need to do it use a PNG with transparent area in the middle or where ever you want.
Short answer is - no, you could not clip div by it's children.
But you can solve your problem without clipping. As I understand, you just need white border around inner div. You may use border or box-shadow. Also you can create such border with 4 divs on each side
While you can't mask complex shapes, you can mask simple shapes like a cube or their rounded edges.
Just use:
overflow-x
or
overflow-y
or
overflow
Which according to an inspect of Google Chrome, can be set to:
auto, hidden, inherit, initial, overlay, revert, scroll, unset, or visible
Although, I find that:
inherit, initial, revert, unset and visible
do not provide a mask in most cases.
Finally, if you want to mask on a curve, simply set a border-radius property.
Remember, in a border-radius, you can use:
1 value: A; all corners
2 values: A, B; A=Top-Left & Bottom-Right B=Top-Right & Bottom-Left
3 values: A, B, C; A=Top-Left B=Top-Right & Bottom-Left C=Bottom-Right
4 values: A, B, C, D; A=Top-Left B=Top-Right C=Bottom-Right D=Bottom-Left
-tested in Google Chrome Version 96.0.4664.45 (Official Build) (64-bit) with HTML and CSS on the date of this posting.
