Transparent hollow or cut out circle
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 :
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>
Div with a transparent cut out circle
In order to have the white cut out circle transparent and let the background show through it, you can use box-shadows
on a pseudo element to minimize markup.
In the following demo, the blue color of the shape is set with the box shadow and not the background-color
property.
DEMO
output:
This can also be responsive: demo
HTML:
<div></div>
CSS:
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;
}
Multiple transparent circles using only css (cutouts)
Just use an svg. Black part of mask is removed from the element it is applied to and white is kept:
html, body { height: 100%; margin: 0; background: linear-gradient(to top, red, blue);}
svg { display: block; width: 150px;}
<svg viewBox="0 0 150 150"> <mask id="circles" maskUnits="objectBoundingBox"> <rect x="0" y="0" width="100%" height="100%" fill="white" /> <circle cx="40" cy="40" r="15" fill="black" /> <circle cx="80" cy="40" r="15" fill="black" /> <circle cx="70" cy="80" r="15" fill="black" /> </mask> <rect x="0" y="0" width="100%" height="100%" fill="green" style="mask: url(#circles)" /></svg>
How to create the transparent circle with cut inside?
You can do this with :after
pseudo-element
.circle { width: 150px; height: 150px; border-top: 2px solid black; border-left: 2px solid black; border-right: 2px solid black; border-bottom: 2px solid transparent; border-radius: 50%; position: relative; transform: rotate(30deg);}
.circle:after { content: ''; position: absolute; bottom: 0; border-radius: 50%; height: 10px; width: 40px; left: 50%; transform: translate(-50%, 7%); border-bottom: 2px solid black; border-top: 2px solid transparent; border-left: 2px solid transparent; border-right: 2px solid transparent;}
<div class="circle"></div>
Transparent half circle cut out of a div
May be can do it with CSS
:after
pseudo property like this:
body { background: green;}
.rect { height: 100px; width: 100px; background: rgba(0, 0, 0, 0.5); position: relative; margin-top: 100px; margin-left: 100px;}
.circle { display: block; width: 100px; height: 50px; top: -50px; left: 0; overflow: hidden; position: absolute;}
.circle:after { content: ''; width: 100px; height: 100px; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; background: rgba(0, 0, 0, 0); position: absolute; top: -100px; left: -40px; border: 40px solid rgba(0, 0, 0, 0.5);}
<div class="rect"> <span class="circle"></span></div>
CSS Cut out circle from a rectangular shape
You can do this using a single element (plus a pseudo element) using radial-gradient
background for the parent element while the pseudo-element creates the circle.
div:before { /* creates the red circle */ position: absolute; content: ''; width: 90px; height: 90px; top: -75px; /* top = -75px, radius = 45px, so circle's center point is at -30px */ left: calc(50% - 45px); background-color: red; border-radius: 50%;}div { position: relative; margin: 100px auto 0 auto; width: 90%; height: 150px; border-radius: 6px; /* only the below creates the transparent gap and the fill */ background: radial-gradient(50px 50px at 50% -30px, rgba(0, 0, 0, 0) 49.5px, rgba(0, 0, 0, .8) 50.5px); /* use same center point as with concentric circles but larger radius */}
/* just for demo */
body,html { font-size: 18px;}body { background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);}
<div></div>
Related Topics
How to Create a Sidebar and Content Area Using Flexbox
Css3 Transition from Width Auto to "N" Px
Two Column Layout with One Having a Fixed Width in CSS
How to Create a Squeezed Box Using Only CSS
How to Add Tableview Footer in Javafx Tableview
Mime Type Error When Adding a CSS File to Angular
Change Ie Background Color on Unopened, Focused Select Box
Using Conditional Comments in HTML
Firefox Text-Overflow with Nowrap Ignored (Chrome Works)
Vertically Center HTML Element Within a Div of Dynamic Height
Why Is a Div with "Position: Absolute" Not by Default Relative to the Document
Inside Transparent Arrow on the Left
Edge Customize Cursor Doesn't Work