Multiple circles cut out from a div with CSS

Question

I need to implement the following (minus the glyphicon on top) in html + css :

For now, I'm stuck with

background-image: -webkit-radial-gradient(0px 45px, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 13px, gray 14px);  

( http://jsfiddle.net/F7K4S/ ), which seems to be heading in a wrong direction, since I can't add a second semicircle.

Answer 1

If you have a plain background color, you can use this CSS solution with pseudo elements and border-radius.

DEMO

Output :

---

EDIT 1 :

As @Paulie_D mentioned, it is possible to make this shape responsive : demo

---

EDIT 2 :

You could aslo use box-shadows in order to minimize markup (only one div and one pseudo element)

demo

---

Code for the first example :

HTML :

<div class="cutout"><div></div></div>

CSS :

.cutout {
    height: 88px;
    width: 88px;
    position:relative;
    background:#808080;

}
.cutout:after, .cutout:before, .cutout >div:before, .cutout >div:after{
    content:'';
    position:absolute;
    width:30px;
    height:30px;
    border-radius: 50%;
    background:#fff;
}
.cutout:before{
    left:-15px;
    top:29px;
}
.cutout:after{
    left:29px;
    top:-15px;
}
.cutout >div:before{
    top:29px;
    right:-15px;
}
.cutout >div:after{
    bottom:-15px;
    left:29px;
}

Answer 2

you have as well possibilitie to get those circle transparent if you draw background from pseudo shadows: http://jsfiddle.net/ELAdQ/40/

body {
    padding: 50px;
    background:linear-gradient(to bottom left, gray, white, gray, white, gray, white, gray, white);
}
.cutout {
    height: 88px;
    width: 88px;
    position:relative;
    overflow:hidden;
}
.cutout:after, .cutout:before, .cutout >div:before, .cutout >div:after {
    content:'';
    position:absolute;
    width:30px;
    height:30px;
    border-radius: 50%;
    box-shadow: 0 0 0 30px #808080
}
.cutout:before {
    left:-15px;
    top:29px;
}
.cutout:after {
    left:29px;
    top:-15px;
}
.cutout >div:before {
    top:29px;
    right:-15px;
}
.cutout >div:after {
    bottom:-15px;
    left:29px;
}

LIMITS: This works if pseudo shadows do not overlap other pseudo elements. Something bigger : http://codepen.io/gc-nomade/pen/rikLp

Answer 3

Well, you have already a good answer using pseudo elements.

If you want to keep your idea about using backgrounds with radial gradients, the answer would be this

.cutout {
    height: 88px;
    width: 88px;

    /* the inverse circle "cut" */
    background-image: 
        radial-gradient(circle at 44px 0px, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 13px, blue 14px),
        radial-gradient(circle at 0 24px, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 13px, red 14px),
        radial-gradient(circle at 44px 24px, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 13px, green 14px),
        radial-gradient(circle at 44px 20px, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 13px, blue 14px);
    background-size: 88px 20px, 44px 48px, 44px 48px, 88px 20px;
    background-position: 0px 0px, 0px 20px, 44px 20px, 0px 68px;
    background-repeat: no-repeat;
}

fiddle

I have set different colors so that it is easy to see what is what.

Also, I have upgraded your notation to be w3c compliant, it is well supported in modern browsers.

Answer 4

My circles are too big, but you get the idea:

http://jsfiddle.net/eZHx8/1/

Two extra containers:

<div  class="cutout">
    <div class="left-right"></div>
    <div class="top-bottom"></div>
</div>

And some CSS:

    body {
    padding: 50px;
}

.cutout {
    height: 88px;
    width: 88px;
    background-color: gray;
    position: relative;
}

.top-bottom:before, .top-bottom:after, .left-right:before, .left-right:after {
    content: '';
    width: 45px;
    height: 45px;
    border-radius: 30px;
    background-color: white;
    position: absolute;
}

.top-bottom:before {

    top: -22px;
    left: 22px;
}

.top-bottom:after {
    bottom: -22px;
    left: 22px;
}

.left-right:before {
    top: 22px;
    left: -22px;
}

.left-right:after {
    bottom: 22px;
    right: -22px;
}