css - How to create a transparent circle? -

css - How to create a transparent circle? -

this question has reply here:

transparent circle using css? 3 answers how create inverse transparent circle in css [duplicate] 2 answers

is there way effect in css ?

i seek play css cuts 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; }

the simplest way utilize transparent div overflow hidden (the grayness one) within set circle box-shadow big spread.

class="snippet-code-css lang-css prettyprint-override">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; } class="snippet-code-html lang-html prettyprint-override"><div class="hascircle"></div> <div class="hascircle"></div> <div class="hascircle"></div>

as can see above i've used :after pseudo element might prevent text in .hascircle visible (due overlapping pseudo-element), it's idea, can using real element like:

<div class="boxtransparentoverflow"> <div class="thetransparentcirclewithgrayspread"></div> text </div>

css css-shapes