css - 用CSS3剪出透明圆圈

Question

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

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

编辑:最大的问题是背景不是纯色，是图像，div 主体的背景必须是半透明的。

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

<div></div>