用 CSS3 剪出透明的圆圈答案

【问题标题】：Cut out transparent circle with CSS3用 CSS3 剪出透明的圆圈
【发布时间】：2014-01-21 14:47:00
【问题描述】：

我想用 CSS3 制作这个形状。是否可以？ :S

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

编辑：最大的问题是背景不是纯色的，它是图片，div body 的背景必须是半透明的。

【问题讨论】：

我认为 CSS 不可能做到这一点。但是，使用 svg 是可能的。

标签： css css-shapes

【解决方案1】：

只能使用 CSS 使用 box-shadows 制作切出的圆圈。以下演示具有固定的高度/宽度，但可以通过百分比大小实现相同的输出，因此使其响应式：

DEMO

输出：

body{
    background:url(http://lorempixel.com/output/people-q-g-640-480-7.jpg);
    background-size:cover;
}
div{
    width:600px; height:350px;
    overflow:hidden;
    position:relative;
    margin:0 auto;
    border-top-left-radius:20px;
    border-top-right-radius:20px;
    z-index:1;
}
div:before,div:after{
    content:'';
    position:absolute;    
}
div:before{   
    top:-50px; left:225px;
    width:150px; height:150px;
    border-radius:50%;
    box-shadow: 0px 0px 0px 9999px #000;
    z-index:-1;
}
div:after{
    top:0;left:0;
    width:100%; height:100%;
    box-shadow: inset 0px -300px 600px -300px #fff;
}

&lt;div&gt;&lt;/div&gt;

【讨论】：

图片消失了，能否请您在imgur上上传一张图片作为替代品？

【解决方案2】：

这是一个使用渐变作为背景图像的纯 CSS 版本。

Fiddle

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
}

（这里跳过了供应商前缀，但不是在小提琴中）

对于反对者：CSS 已经成熟了很多，请发挥一些想象力。 :)

【讨论】：

biigist的问题是bg不是纯色，是image:S，div body的bg必须是半透明的
你会想要研究 SVG。 :P 这不仅仅是 CSS，而且绝对是您可以构建的 Web 兼容标准。
@vals jsfiddle.net/Bruno_AFK/R6Rc9 我尝试修改你的代码并制作我需要的东西，但现在我只做了一件事，顶部不是一直透明（那个圆圈）你能帮忙吗？

【解决方案3】：

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

<div id="box">
    <div id="circle">
        &nbsp;
    </div>
</div>

body {background-color:Purple;}

#box {
    margin:5em;
    border-radius: 0.5em 0.5em 0 0;
    position:absolute;
    width:10em;
    height:5em;
    background:Black; /* default background */
    background:linear-gradient(to bottom, Black, #555);
}

#circle {
    margin-left:3em;
    border-radius:4em;
    position:absolute;
    top:-2em;
    width:4em;
    height:4em;
    background:Purple;
}

更改<body>标签的背景颜色，你会看到整个圆圈。

【讨论】：

【解决方案4】：

我的立场是正确的！您可以仅使用 CSS3 创建一些复杂的形状。感谢您分享所有解决方案。

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

【讨论】：