Html 从div中剪下的透明半圆

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

我不能使用上面有白色圆圈的黑色矩形，因为半圆形必须是透明的，并让背景显示出来

所需形状：

---

凯尔·塞维诺卡斯做了一些很好的工作。我就是以此为基础。结帐

---

我基本上折叠了圆圈的白色div，并给了它白色的边框。OP问题讨论了构成形状的颜色元素；关于它的边界没有任何内容，对吗？

可以使用

CSS

:after

伪属性如下：

正文{
背景：绿色；
}
.直肠{
高度：100px；
宽度：100px；
背景：rgba（0,0,0,0.5）；
位置：相对位置；
边缘顶部：100px；
左边距：100px；
}
.圆圈{
显示：块；
宽度：100px；
高度：50px；
顶部：-50px；
左：0；
溢出：隐藏；
位置：绝对位置；
}
.圆圈：之后{
内容：''；
宽度：100px；
高度：100px；
-moz边界半径：100px；
-webkit边界半径：100px；
边界半径：100px；
背景：rgba（0,0,0,0）；
位置：绝对位置；
顶部：-100px；
左：-40px；
边框：40px固体rgba（0,0,0,0.5）；
}

---

现在，我能想到的唯一方法是使用大量1像素宽的黑色div，它们彼此相邻，高度不同。从技术上讲，这是可能的，但应该坚决反对。也；除非您想解决添加1x1像素div的麻烦并手动执行消除混叠，否则您将无法进行消除混叠

---

如果你能举例说明你想如何使用它，可能会更有帮助。为什么它只需要黑色/透明？正如omarello所说，在大多数情况下，最好的解决方案可能是一个简单的GIF或PNG透明图像。

使用径向渐变可以非常轻松地完成

结果：

<div class='shape'></div>

.shape {
  margin: 0 auto;
  width: 10em; height: 16em;
  /* WebKit browsers, old syntax */
  background: -webkit-radial-gradient(50% 0, circle, transparent 30%, black 30%);
  
  /* IE10, current versions of Firefox and Opera */
  background: radial-gradient(circle at 50% 0, transparent 30%, black 30%);
}

HTML：

<div class='shape'></div>

.shape {
  margin: 0 auto;
  width: 10em; height: 16em;
  /* WebKit browsers, old syntax */
  background: -webkit-radial-gradient(50% 0, circle, transparent 30%, black 30%);
  
  /* IE10, current versions of Firefox and Opera */
  background: radial-gradient(circle at 50% 0, transparent 30%, black 30%);
}

---

有关兼容性的详细信息，请参阅。

您可以使用框阴影来制作透明的切圆：

正文{
背景：url(http://i.imgur.com/qi5FGET.jpg)不重复；
背景尺寸：封面；
}
div{
显示：内联块；
宽度：300px；高度：300px；
位置：相对位置；
溢出：隐藏；
}
部门：以前{
内容：''；
位置：绝对位置；
底部：50%；
宽度：100%；高度：100%；
边界半径：100%；
盒影：0px 300px 0px 300px#000；
}
.透明{
不透明度：0.5；
}

---

使用SVG:

这里有一个使用SVG的替代解决方案（尽管您没有标记它）。使用SVG的优点是：

• 与径向渐变相比，它具有更好的浏览器支持
• SVG可以支持形状内部的图像，这与框阴影方法不同

而SVG不受

---

我只需要在响应图像的底部设置圆角。我从@sandeep fiddle开始，并根据自己的需要对其进行了改进：

            .rect
            {
                height: 85vh;
                    position: relative;
                background-color: red;
                width: 60vw;
            }

            .circle-helper{
                display: block;
                width: 100%;
                padding-bottom: 50%;
                bottom: 0;
                left: 0;
                overflow: hidden;
                position: absolute;
                background-color: transparent;

                    }
            .circle{
                display: block;
                width: 100%;
                padding-bottom: 100%;
                // height: 500px;
                bottom: 0;
                left: 0;
                overflow: hidden;
                position: absolute;
                background-color: transparent;
            }

            .circle:after{
                box-sizing: content-box;
                content: '';
                width: 100%;
                height: 100%;
                -moz-border-radius: 50%;
                -webkit-border-radius: 50%;
                border-radius: 50%;
                background: rgba(0,0,0,0);
                position: absolute;
                transform: translate(-50%, -50%);
                top: 50%;
                left: 50%;
                border: 300px solid blue;
                }
                top: 50%
                left: 50%
                border: 300px solid blue

试试这个

正文{
背景色：#333；
通过：0px；
高度：0px；
}
#应用程序{
背景：#333 url（'https://source.unsplash.com/random")不重复;；
背景尺寸：封面；
宽度：360px；
高度：560px；
位置：相对位置；
溢出：隐藏；
}
.应用程序栏{
宽度：100%；
高度：50px；
位置：绝对位置；
底部：0px；
左：0；
}
.应用程序栏.应用程序栏{
线高：50px；
位置：相对位置；
宽度：100%；
高度：50px；
背景图像：径向梯度（315px 0处的圆圈35px，透明700px，#f44336 50px）；
}
.应用程序栏.应用程序栏i{
颜色：#FFF；
显示：块；
线高：50px；
浮动：左；
宽度：50px；
文本对齐：居中；
光标：指针；
边际上限：0px；
}
.应用程序栏.应用程序栏i:悬停{
背景色：rgba（0,0,0,1）；
}
.应用程序栏.应用程序栏按钮{
填充：0px；
框大小：边框；
文本对齐：居中；
边际：0px；
边界：0px；
大纲：0px；
宽度：60px；
高度：60px；
线高：60px；
光标：指针；
颜色：#FFFFFF；
显示：块；
边界半径：50%；
位置：绝对位置；
顶部：-30px；
左：100%；
左边距：-75px；
背景色：#f44336；
过渡：所有。2轻松；
}
.app bar.bar按钮跨度{
线高：60px；
字体大小：30px；
}
.应用程序栏.应用程序栏按钮：悬停{
变换：旋转（45度）；
过渡：所有。2轻松；
}

菜单
搜索
添加

这是一个“做作业”的问题吗？？？hmmmmm为什么不想使用白色圆圈？只需将上面的图像用作背景图像！从技术上讲，这只是CSS3我不想使用白色圆圈，因为我希望形状是透明的。这是一个好方法，但我仍然希望OP的形状是透明的，这种方法也不能看到形状下面的背景。这是非常好的。我有点困惑它是如何工作的，但在从

中删除
溢出：隐藏
后就很清楚了。圆圈
：近乎完美。现在只需将所有
rgba（0,0,0,0.5）
颜色更改为
#000
。瞧！好的运动，哦，好的运动