Is it possible to cut out a hollow circle using only CSS?
This we can all do:
But can we do this?
The circle must be hollow and transparent. Thus the problem is not solved by putting a solid color circle over a div
.
csscss-shapessvgtransparency
Is it possible to cut out a hollow circle using only CSS?
This we can all do:
But can we do this?
The circle must be hollow and transparent. Thus the problem is not solved by putting a solid color circle over a div
.
Best Answer
You can achieve a transparent cut out circle with 2 different techniques :
1.SVG
The following examples use an inline svg. The first snippet uses the mask element to cut out the transparent circle and the second hollow circle is made with a path element. The circle is made with 2 arc commands :
With the mask element :
With one path element :
The main advantages of using SVG in this case are :
2. CSS only using BOX-SHADOWS
Create a div with
overflow:hidden;
and a round pseudo element inside it with border-radius. Give it a huge box-shadow and no background :Browser support for box-shadows is IE9+ see canIuse
The same approach would be to use border instead of box-shadows. It is interesting if you need to support borowsers that don't support box-shadows like IE8. The technique is the same but you need to compensate with the top and left values to keep the circle in the center of the div :