Mask div using CSS

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> <div> <div> </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> <div> </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.