Intersection in CSS3

Question

Is it possible to make a "hole" in an element (div, span) like this using CSS. I know I can do it with a transparent image but I'm just curious to know if it's possible in CSS.

body {padding:70px; background:url(http://ipadinsight.com/wp-content/uploads/2011/11/AirPlayMirroring_thumb.jpg)} 
div {background:red;border-radius:10px;width:400px;height:100px}

Try at jsfiddle here http://jsfiddle.net/xqEV2/

enter image description here

possible duplicate of [Creating a hole in a
element](http://stackoverflow.com/questions/4344906/creating-a-hole-in-a-div-element) — Sjoerd, Nov 11 '11 at 08:04
[Is it possible to clip/mask a div using html5 and canvas?](http://stackoverflow.com/questions/6951342/is-it-possible-to-clip-mask-a-div-using-html5-and-canvas) — Sjoerd, Nov 11 '11 at 08:07

sandeep · Accepted Answer · 2011-11-11T09:18:32.623

6

Yes; you can do it with pure css. Like this:

body {padding:70px; background:url(http://ipadinsight.com/wp-content/uploads/2011/11/AirPlayMirroring_thumb.jpg);}

.parent {background:red;border-radius:10px;width:400px;height:100px;position:relative;}
.circle{

    float:right;
    position:absolute;
    right:-50px;
    top:0;
    bottom:0;
    width:50px;
    overflow:hidden;
}
.circle:after{
    content:"";
    width:40px;
    height:40px;
    -moz-border-radius:100px;
    display:block;
    border:red 50px solid ;
    margin-left:-45px;
    margin-top:-20px;
}

Check this live example

http://jsfiddle.net/xqEV2/4/

edited Nov 11 '11 at 09:18

answered Nov 11 '11 at 08:50

sandeep

91,313
23
137
155

It's not working as I wanted to use. How to make right bottom and top border round in this http://jsfiddle.net/jitendravyas/xqEV2/9/ – Jitendra Vyas Nov 14 '11 at 15:21

score 0 · Answer 2 · answered Nov 11 '11 at 08:18

0

You can simulate a hole by setting the same background image for the hole as the underlying element. That does not make it really transparent.

http://jsfiddle.net/VJRFh/2/

answered Nov 11 '11 at 08:18

Sjoerd

74,049
16
131
175

score -1 · Answer 3 · answered Nov 11 '11 at 08:13

-1

No, A DIV is a "solid object".

You can on the other hand use a transparent picture(png or gif) to make something look like a hole. you wont be able to interact with the layer underneth as long as you havent changed the z-index..

You maybe could use borders to make it look like a box and keep the background-color:transparent

answered Nov 11 '11 at 08:13

Bobby Lundquist

19
1

You can pass mouse events to other objects using javascript though. – Kyle Nov 11 '11 at 08:26

Intersection in CSS3

3 Answers3

http://jsfiddle.net/xqEV2/4/