css – 透明半圆切出一个div

前端之家收集整理的这篇文章主要介绍了css – 透明半圆切出一个div前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想使用CSS3做透明的半圆形.唯一的要求是形成形状的所有元素必须是黑色或透明的.

我不能使用黑色矩形,其上有一个白色圆圈,因为半圆必须是透明的,让背景显示出来.

所需形状:

解决方法

可能可以用CSS:在这样的伪属性之后:
  1. .rect
  2. {
  3. height: 100px;
  4. width: 100px;
  5. background:rgba(0,0.5);
  6. position:relative;
  7. margin-top:100px;
  8. margin-left:100px;
  9. }
  10. .circle{
  11. display:block;
  12. width: 100px;
  13. height: 50px;
  14. top:-50px;
  15. left:0;
  16. overflow:hidden;
  17. position:absolute;
  18. }
  19. .circle:after{
  20. content:'';
  21. width: 100px;
  22. height: 100px;
  23. -moz-border-radius: 100px;
  24. -webkit-border-radius: 100px;
  25. border-radius: 100px;
  26. background:rgba(0,0);
  27. position:absolute;
  28. top:-100px;
  29. left:-40px;
  30. border:40px solid rgba(0,0.5);
  31. }

http://jsfiddle.net/FcaVX/2/

猜你在找的CSS相关文章