用CSS3剪下透明圆

我想在CSS3中制作这个形状。可能吗

我的计划是在背景中放一张图片，所以我希望这个部分是透明的（那个圆形部分）

编辑：

---

最大的问题是背景不是纯色，它是图像，

div

body的背景必须是半透明的

我站直了！您只能使用CSS3创建一些复杂形状。。感谢分享所有的解决方案

忽略以下内容：

---

不，您不能仅使用CSS3创建复杂形状。您可以使用SVG或HTML5画布创建它们。如果我正确理解了你的问题，你只想添加一个透明的图像作为背景图像吗？为此，只需创建一个具有透明背景（.gif、.png、.svg）的图像并使用它。具有透明区域的图像可以与CSS3一起使用。

据我所知，您只能绘制矩形并添加与背景颜色相同的圆，以模拟透明圆的效果。见：

body{背景色：紫色；}
#盒子{
边缘：5em；
边界半径：0.5em 0.5em 0；
位置：绝对位置；
宽度：10em；
身高：5公分；
背景：黑色；/*默认背景*/
背景：线性渐变（至底部，黑色，#555）；
}
#圈{
左边距：3em；
边界半径：4em；
位置：绝对位置；
顶部：-2米；
宽度：4em；
高度：4em；
背景：紫色；
}

---

更改

标记的背景色，您将看到整个圆圈。

这是一个仅CSS版本，使用渐变作为背景图像

（此处跳过了供应商前缀，但不在小提琴中）

---

对于反对者：CSS已经成熟了很多，只要运用一些想象力就可以了。：）

只能使用CSS使用框阴影创建剪切圆。以下演示具有固定的高度/宽度，但可以通过百分比大小获得相同的输出，从而使其响应速度：

输出：

正文{
背景：url(http://lorempixel.com/output/people-q-g-640-480-7.jpg);
背景尺寸：封面；
}
div{
宽度：600px；高度：350px；
溢出：隐藏；
位置：相对位置；
保证金：0自动；
边框左上半径：20px；
边框右上角半径：20px；
z指数：1；
}
div:before，div:after{
内容：''；
位置：绝对位置；
}
div:在{
顶部：-50px；左侧：225px；
宽度：150px；高度：150px；
边界半径：50%；
盒影：0px 0px 0px 9999px#000；
z指数：-1；
}
部门：之后{
顶部：0；左侧：0；
宽度：100%；高度：100%；
盒影：插图0px-300px 600px-300px#fff；
}

---

我认为CSS不可能做到这一点。但是，svg也有可能。最大的问题是bg不是纯色，而是图像：s和div body的bg必须是半透明的。然后，您需要查看svg：P这不仅仅是CSS，而且绝对是一个可以建立在web上的兼容标准。@VAL我试着修改你的代码并做一些我需要的事情，但现在我只做了一件事，top不是完全透明的（那个圆圈）。你能帮忙吗？图像已经消失了，你能在imgur上上传一个图像并用它来替换吗？

div {
    width: 235px;
    height: 115px;
    border-radius: 6px 6px 0 0;
    background-color: #717172;
    background-image: 
        radial-gradient(center, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 50%),
        linear-gradient(top, rgba(0,0,0,1) 0%, rgba(113,113,114,1) 100%);
    background-size: 128px 128px, 100%, 100%;
    background-position: center -54px, left top;
    background-repeat: no-repeat, repeat
}