Geek Answers Handbook

Cut transparent circle with CSS3

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

enter image description here

My plan is to put the image in the background, so I want this part to be transparent (this round part)

EDIT: The biggest problem is that the background is not a solid color, the image and the background of the body divshould be translucent.

+4
source share
4 answers

A cut circle can only be done using CSS using shadows. The following demo has a fixed height / width, but you can achieve the same output with a percentage of 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>
Hide result
+3

CSS .

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
}

( , )

: CSS , .:)

+2

, , , . . 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;
}

<body>, .

-1

! , CSS3. , .

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

-4
source

More articles:


All Articles