带有透明切出圆圈的Div [重复]答案

【问题标题】：Div with a transparent cut out circle [duplicate]带有透明切出圆圈的Div [重复]
【发布时间】：2020-08-16 18:38:44
【问题描述】：

我可以使用 CSS 制作一个带有半切圆的矩形 div 吗？半圈应该是透明的，让背景透出来。

所需的 CSS 形状：

HTML：

<div></div>

CSS：

div{
    background : #448CCB;
    width:300px;
    height:300px;
}

【问题讨论】：

你需要看穿白色的半圈吗？意味着它应该显示背景图像，渐变......？
@web-tiki 你认为这可能吗？
是的，它带有盒子阴影，否则这里的答案应该可以解决问题
这只是一种形状。半圆部分是空格。
这是@web-tiki 建议jsfiddle.net/a7dcP/1 的box-shadow 解决方案

标签： css css-shapes

【解决方案1】：

为了使白色切出的圆圈透明并让背景通过它显示出来，您可以在伪元素上使用box-shadows 以最小化标记。

在下面的演示中，形状的蓝色是用盒子阴影设置的，而不是background-color 属性。

DEMO

输出：

这也可以是响应式的：demo

HTML：

<div></div>

CSS：

div {
  width: 300px;
  height: 300px;
  position: relative;
  overflow: hidden;
}

div::before {
  content: '';
  position: absolute;
  bottom: 50%;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  box-shadow: 0px 300px 0px 300px #448CCB;
}

【讨论】：

【解决方案2】：

还好吗？

Demo

div{
    width:100px;
    height:100px;
    background:#03b0d5;
    display:block;
    position:relative;
    overflow:hidden;
}
div:after{
    width:100px;
    height:100px;
    border-radius:50%;
    background:#fff;
    display:block;
    position:absolute;
    content:'';
    top:-50px;
    left:0;
 }

【讨论】：

对不起，我需要半圆部分是透明的/什么都没有。我只希望蓝色部分是形状区域
是的，有什么不同？它的半圈:) @AeonWallace
@ShibinRagh 问题是当你将div的背景设置为透明时，你不会看到半圆形，而是正方形。

【解决方案3】：

这是我的解决方案

HTML：

<div id="shape"></div>

CSS：

#shape {
    width:250px;
    height:250px;
    background:#448ccb;
    position:relative;
}

#shape:before {
    content:" ";
    position:absolute;
    width:250px;
    height:250px;
    background:#fff;
    left:0; top:-50%;
    border-radius:50%;
}

jsfiddler 中的链接：demo

带有盒子阴影的Solition：

HTML：

<div id="wrap">
    <div id="shape"></div>
</div>

CSS：

#wrap {
    background:#ccc;
    padding:20px;
}
#shape {
    width:250px;
    height:250px;    
    position:relative;
    overflow:hidden;
}

#shape:before {
    content:" ";
    position:absolute;
    width:100%;
    height:100%;
    left:0; top:-50%;
    border-radius:50%;
    box-shadow:0 0px 0 250px #448ccb
}

jsfiddler 中的链接：demo

【讨论】：

【解决方案4】：

如果您不介意“吃掉”的部分是白色且不透明，可以：

http://jsfiddle.net/tWbx5/2/

<div></div>

CSS：

div {
    width: 250px;
    height: 250px;
    margin: 10px;
    background: #448CCB;
}

div:before {
    content:" ";
    background:white;
    display: block;
    width:250px;
    height: 125px;
    border-radius: 0 0 125px 125px;
}

【讨论】：