Mask div using CSS

Question

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?

Could you define `mask out a rectangle` please.. It's not very clear what you mean.. — Pogrindis, Jul 12 '16 at 13:08
Don't understand what you want? please add some working example. — Minal Chauhan, Jul 12 '16 at 13:09
Using @Jacques Marais fiddle as a starting point, I think you want this: https://jsfiddle.net/a8xsmrca/ ? — deebs, Jul 12 '16 at 13:25
@deebs thanks for the comment yeh deebs that is exactly what i getting at! — PahPow, Jul 12 '16 at 14:06

score 4 · Accepted Answer · answered Jul 12 '16 at 15:23

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('http://farm9.staticflickr.com/8242/8558295633_f34a55c1c6_b.jpg');
}
.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;
}

score 1 · Answer 2 · answered Jul 12 '16 at 13:30

1

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.

answered Jul 12 '16 at 13:30

Newbie

77
1
3

score 1 · Answer 3 · answered Nov 28 '21 at 03:04

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.

score 0 · Answer 4 · answered Jul 12 '16 at 13:20

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

Mask div using CSS

4 Answers4