使用CSS从div中删除多个圆圈

Question

我需要在html + css中实现以下(减去上面的glyphicon):

现在,我坚持了下来

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/),似乎朝着错误的方向前进,因为我无法添加第二个半圆.

Answer 1

如果您有纯背景颜色,则可以将此CSS解决方案与伪元素和border-radius一起使用.

DEMO

输出:

编辑1:

正如@Paulie_D所提到的,可以使这个形状响应:演示

编辑2:

你也可以使用盒阴影来最小化标记(只有一个div和一个伪元素)

演示

第一个例子的代码:

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

好吧,你已经使用伪元素得到了很好的答案.

如果你想保留使用径向渐变背景的想法,答案就是这样

.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;
}

小提琴

我设置了不同的颜色,以便很容易看出它是什么.

此外,我已将您的符号升级为符合w3c,在现代浏览器中得到了很好的支持.