Clip content inside div with another div

Question

I am working on some kind of drawing app. There are elements inside a container div, and there is another div on top that should clip all the elements inside if it.

Here is the example: http://jsfiddle.net/n6m4n750/

The red rectangle "#clip must clip all the elements inside #container div, so any elements or part of an element that is outside of the #clip div, will be hidden.

How is it possible to do that?

Any help will be appreciated.

Answer 1

Add the following css to #clip:

box-shadow: 0px 0px 0px 25px white;

Here, the white shadow of the #clip overlaps the contents that need to be clipped which gives a clipping effect.

Here's a DEMO.

Answer 2

Not really posible to really clip it, as far as I know.

If your background is white, you can simulate the idea givind a huge white shadow around it

#clip {
    position: absolute;
    width: 300px;
    height: 300px;
    border: solid 2px red;
    top: 50px;
    left: 50px;
    box-shadow: 0px 0px 0px 1000px white;
}

demo