我想仅使用 CSS3 制作一个透明的切出半圆形形状。唯一的要求是形成形状的所有元素必须是黑色或透明。
我不能使用上面有一个白色圆圈的黑色矩形，因为半圆必须是透明的并让背景显示出来。
所需形状：
收藏
![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2024 //m.sbmmt.com/ All Rights Reserved | php.cn | 湘ICP备2023035733号
2
441
您可以使用盒子阴影来制作透明剪切圆：
body { background: url(http://i.imgur.com/qi5FGET.jpg) no-repeat; background-size: cover; } div { display: inline-block; 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 #000; } .transparent { opacity: 0.5; }这可以是具有百分比长度的响应式：
body { background: url(http://lorempixel.com/output/people-q-c-640-480-1.jpg) no-repeat; background-size: cover; } div { width: 40%; 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 #000; } .transparent { opacity: 0.5; }也许可以使用 CSS
::after伪属性来做到这一点，如下所示：body { background: green; } .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); }