使用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所提到的，可以使这种形状响应： demo

---

编辑2：

你可以使用盒子阴影来最小化标记（只有一个div和一个伪元素）

<强> demo

---

第一个例子的代码：

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

fiddle

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

此外，我已将您的符号升级为符合w3c标准，现代浏览器也很好地支持它。

Answer 3

如果你从伪阴影中绘制背景，你也可以让这些圆圈变得透明：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：如果伪阴影不与其他伪元素重叠，则此方法有效。更大的东西：http://codepen.io/gc-nomade/pen/rikLp

Answer 4

我的圈子太大了，但你明白了这个想法：

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

两个额外的容器：

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

还有一些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;
}