CODEWITHSUNDEEP
csscss-shapes
josephynooby
josephynooby

Reputation: 79

Cut out transparent circle with CSS3

I want to make this shape in CSS3. Is it possible? :S

enter image description here

My plan is to put a picture in the background so I want that this part be transparent (that round part )

EDIT: The biggest problem is that background is not solid color, it is image and background of div body must be semi-transparent.

Upvotes: 4

Views: 4381

Answers (4)

EStafford
EStafford

Reputation: 648

I stand Corrected! You CAN create SOME complex shapes using CSS3 only.. Thanks for sharing all the solutions.

Ignore the following: No, you cannot create complex shapes using just CSS3. You can create them using SVG or HTML5 Canvas. If I understand your question correctly, you just want to add an image with with transparency as a background image? To do that, just create an image with a transparent background (.gif, .png, .svg) and use that. Images with transparent regions can be used with CSS3.

Upvotes: -4

web-tiki
web-tiki

Reputation: 103790

The cut out circle can be made only with CSS using box-shadows. The following demo has fixed height/widths but it is possible to achive the same output with percent size and therefore make it responsive :

DEMO

output :

cut out circle with CSS

body{
    background:url(http://lorempixel.com/output/people-q-g-640-480-7.jpg);
    background-size:cover;
}
div{
    width:600px; height:350px;
    overflow:hidden;
    position:relative;
    margin:0 auto;
    border-top-left-radius:20px;
    border-top-right-radius:20px;
    z-index:1;
}
div:before,div:after{
    content:'';
    position:absolute;    
}
div:before{   
    top:-50px; left:225px;
    width:150px; height:150px;
    border-radius:50%;
    box-shadow: 0px 0px 0px 9999px #000;
    z-index:-1;
}
div:after{
    top:0;left:0;
    width:100%; height:100%;
    box-shadow: inset 0px -300px 600px -300px #fff;
}
<div></div>

Upvotes: 4

MildlySerious
MildlySerious

Reputation: 9170

Here's a CSS only version using gradients as background-images.

Fiddle

div {
    width: 235px;
    height: 115px;
    border-radius: 6px 6px 0 0;
    background-color: #717172;
    background-image: 
        radial-gradient(center, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 50%),
        linear-gradient(top, rgba(0,0,0,1) 0%, rgba(113,113,114,1) 100%);
    background-size: 128px 128px, 100%, 100%;
    background-position: center -54px, left top;
    background-repeat: no-repeat, repeat
}

(skipped vendor prefixes here, but not in the fiddle)

To the naysayers: CSS matured a lot, just use some imagination. :)

Upvotes: 2

A.L
A.L

Reputation: 10503

As far as I know, you can only draw the rectangle and add a circle with the same color as the background in order to mimic the effect of a transparent circle. See jsfiddle:

<div id="box">
    <div id="circle">
        &nbsp;
    </div>
</div>

body {background-color:Purple;}

#box {
    margin:5em;
    border-radius: 0.5em 0.5em 0 0;
    position:absolute;
    width:10em;
    height:5em;
    background:Black; /* default background */
    background:linear-gradient(to bottom, Black, #555);
}

#circle {
    margin-left:3em;
    border-radius:4em;
    position:absolute;
    top:-2em;
    width:4em;
    height:4em;
    background:Purple;
}

Change the background color of the <body> tag and you will see the whole circle.

Upvotes: -1

Related Questions