我想使用CSS3做透明的半圆形.唯一的要求是形成形状的所有元素必须是黑色或透明的.
我不能使用黑色矩形,其上有一个白色圆圈,因为半圆必须是透明的,让背景显示出来.
所需形状:
解决方法
可能可以用CSS:在这样的伪属性之后:
- .rect
- {
- height: 100px;
- width: 100px;
- background:rgba(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);
- position:absolute;
- top:-100px;
- left:-40px;
- border:40px solid rgba(0,0.5);
- }