透明半圈切出一个div [英] Transparent half circle cut out of a div

问题描述

我想使用CSS3做一个透明的切出半圆形状。唯一的要求是形成形状的所有元素必须是黑色或透明。

I would like to make a transparent cut out half circle shape using only CSS3. The only requirement is that all the elements that form the shape must be black or transparent.

我不能使用白色圆形的黑色矩形，因为半圆必须是透明的，让背景通过。

I cannot use a black rectangle with a white circle on top of it because the half circle has to be transparent and let the background show through.

所需形状：

推荐答案

可以使用 CSS ：之后的伪属性：

May be can do it with CSS :after pseudo property like this:

.rect
{
    height: 100px;
    width: 100px;
    background:rgba(0,0,0,0.5);
    position:relative;
    margin-top:100px;
    margin-left:100px;
}
.circle{
    display:block;
    width: 100px;
    height: 50px;
    top:-50px;
    left:0;
    overflow:hidden;
    position:absolute;
}
.circle:after{
    content:'';
    width: 100px;
    height: 100px;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    background:rgba(0,0,0,0);
    position:absolute;
    top:-100px;
    left:-40px;
    border:40px solid rgba(0,0,0,0.5);
}

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