Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Intersection in CSS3

Intersection in CSS3

Problem

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/

Problem courtesy of: Jitendra Vyas

Solution

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/

Solution courtesy of: sandeep

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Intersection in CSS3

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×