Question

我想在CSS3中创建这个形状。可能吗？：S

enter image description here

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

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

Answer 1

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

<强> DEMO

输出：

cut out circle with CSS

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>

Answer 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成熟了很多，只是想象一下。：）

Answer 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>标记的背景颜色，您将看到整个圆圈。

Answer 4

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

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

用CSS3剪出透明圆圈

4 个答案: