用CSS3切出透明圆圈 [英] Cut out transparent circle with CSS3

问题描述

我想在CSS3中制作这种形状.是否有可能? :S

I want to make this shape in CSS3. Is it possible? :S

我的计划是在背景中放置图片，因此我希望该部分透明(该圆形部分)

My plan is to put a picture in the background so I want that this part be transparent (that round part )

最大的问题是背景不是纯色，而是图像，div主体的背景必须是半透明的.

The biggest problem is that background is not solid color, it is image and background of div body must be semi-transparent.

推荐答案

只能使用CSS使用框阴影来制作切出的圆.以下演示具有固定的高度/宽度，但是可以达到百分比大小的相同输出，从而使其具有响应:

The cut out circle can be made only with CSS using box-shadows. The following demo has fixed height/widths but it is possible to achive the same output with percent size and therefore make it responsive :

演示

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>

这篇关于用CSS3切出透明圆圈的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！