How to create a transparent circle?

Question

Is there a way to get this effect in CSS ?

enter image description here

I try to play with this css but it cuts only first layer.

div{
    width:300px;
    height:300px;
    position:relative;
    overflow:hidden;
}
div:before{
    content:'';
    position:absolute;
    bottom:50%;
    width:100%;
    height:100%;
    border-radius:100%;
    box-shadow: 0px 300px 0px 300px #448CCB;
}

http://stackoverflow.com/questions/22332755/build-a-rectangle-frame-with-a-transparent-circle-using-css-only — eclipsis, Oct 30 '14 at 13:52

Roko C. Buljan · Answer 1 · 2014-10-30T14:09:07.313

8

The simplest way is to use a transparent DIV with overflow hidden (the gray one)
than inside simply put a circle with box-shadow with really large spread.

html, body{height:100%;}
body{
    background: url(http://web-vassets.ea.com/Assets/Richmedia/Image/Screenshots/FIFA-Street-London1web.jpg?cb=1330546446) 50% / cover;
}

.hasCircle{
    width:150px;
    height:300px;
    position:relative;
    overflow:hidden;
  float:left;
}
.hasCircle:after{
    content:" ";
    position:absolute;
    left:0; right:0;
    margin:100px auto;
    width:100px;
    height:100px;
    border-radius:50%;
    box-shadow: 0 0 0 1000px #444;
}

<div class="hasCircle"></div>
<div class="hasCircle"></div>
<div class="hasCircle"></div>

As you can see above I've used the :after pseudo element which might prevent some text in .hasCircle to be visible (due to the overlapping pseudo-element), but it's just to get an idea, you can do it using a real element like:

<div class="boxTransparentOverflow">
   <div class="theTransparentCircleWithGraySpread"></div>
   Some text
</div>

edited Oct 30 '14 at 14:09

answered Oct 30 '14 at 14:03

Roko C. Buljan

196,159
39
305
313

The gray canvas is a background. I need this background to be cutted 4 times. – user3351236 Oct 31 '14 at 05:35
Now in examples above the background is created from circles. – user3351236 Oct 31 '14 at 05:36
I need

– user3351236 Oct 31 '14 at 05:38
@user3351236 well, have you tried to implement or modify the above code? Simply replace the pseudo part with the needed selector :) – Roko C. Buljan Oct 31 '14 at 08:28

How to create a transparent circle?

1 Answers1