Menu
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.
422
Creating an empty circle with CSS To create an empty circle first of all add an empty <div> element. Use CSS border-radius: 50% to make the div element circular. Additionally set the height, width and border of <div> element.
Use the “relative” value of the position property to position the <div> element relative to its normal position. Style the cut corner with the ::before pseudo-element and use the content property required while using the :: before pseudo-element to generate and insert content.
You can achieve a transparent cut out circle with 2 different techniques :
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 :
body{background:url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');background-size:cover;}<svg viewbox="0 0 100 50" width="100%"> <defs> <mask id="mask" x="0" y="0" width="80" height="30"> <rect x="5" y="5" width="90" height="40" fill="#fff"/> <circle cx="50" cy="25" r="15" /> </mask> </defs> <rect x="0" y="0" width="100" height="50" mask="url(#mask)" fill-opacity="0.7"/> </svg>With one path element :
body{background: url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');background-size:cover;} svg{ display:block; width:70%; height:auto; margin:0 auto; } path{ transition:fill .5s; fill:#E3DFD2; } path:hover{ fill:pink; }<svg viewbox="-10 -1 30 12"> <path d="M-10 -1 H30 V12 H-10z M 5 5 m -5, 0 a 5,5 0 1,0 10,0 a 5,5 0 1,0 -10,0z"/> </svg>The main advantages of using SVG in this case are :
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 :
div{ position:relative; width:500px; height:200px; margin:0 auto; overflow:hidden; } div:after{ content:''; position:absolute; left:175px; top:25px; border-radius:100%; width:150px; height:150px; box-shadow: 0px 0px 0px 2000px #E3DFD2; } body{background: url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');background-size:cover;}<div></div>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 :
body{ background: url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg'); background-size:cover; } div{ position:relative; width:500px; height:200px; margin:0 auto; overflow:hidden; } div:after{ content:''; position:absolute; left:-325px; top:-475px; border-radius:100%; width:150px; height:150px; border:500px solid #E3DFD2; }<div></div>It can be done using a radial gradient background and pointer-events (to allow mouse interaction behind through the circle layer, e.g. text selection). Here's a demo page and a screenshot:
And this would be the code for it:
body { margin: 0; padding: 0; } .underneath { padding: 0; margin: 265px 0 0 0; width: 600px; } .overlay { top: 0; left: 0; position: absolute; width: 600px; height: 600px; background: -moz-radial-gradient(transparent 150px, rgba(0, 0, 0, 1) 150px); background: -webkit-radial-gradient(transparent 150px, rgba(0, 0, 0, 1) 150px); background: -ms-radial-gradient(transparent 150px, rgba(0, 0, 0, 1) 150px); background: -o-radial-gradient(transparent 150px, rgba(0, 0, 0, 1) 150px); pointer-events: none; /* send mouse events beneath this layer */ }<body> <p class="underneath"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <div class="overlay"></div> </body>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
