Use CSS3 's radial-gradient to implement a circle with a penetrating effect

First look at the requirements:

, you need to do one of these effects. What do you usually do? The semicircle is cut into pictures to solve a situation where the picture background is fixed and uneven.

If the background picture is a pattern tile, the cut is not fixed? The cut semicircle doesn't correspond to the background map.

Now the radial gradient using CSS3 can achieve this transparent circle, so that if the circle is transparent, do not worry about the background picture of the situation

Background-image:repeating-radial-gradient (500px 500px at 50% 0px, transparent 0, transparent 50px, #0cc 50px, #0cc 200%) ;

Code Explanation:

500px 500px at 50% 0px,

White area background color width height, and center coordinate

Transparent 0, transparent 50px, #fff 50px, #fff 200%

The background color from the center to the circle is transparent, and the background color from the small circle to the big circle is #0cc