从 div 中切出的透明半圆 [英] Transparent half circle cut out of a div

问题描述

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

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

想要的形状:

解决方案

也许可以用 CSS :after 伪属性来做到:

body {背景:绿色；}.rect {高度:100px；宽度:100px；背景:rgba(0, 0, 0, 0.5);位置:相对；边距顶部:100px；左边距:100px；}.圆圈 {显示:块；宽度:100px；高度:50px；顶部:-50px；左:0；溢出:隐藏；位置:绝对；}.circle:在{之后内容: '';宽度:100px；高度:100px；-moz-border-radius: 100px;-webkit-border-radius: 100px;边框半径:100px；背景:rgba(0, 0, 0, 0);位置:绝对；顶部:-100px；左:-40px；边框:40px 实心 rgba(0, 0, 0, 0.5);}

<div class="rect"><span class="circle"></span>

在 JSFiddle 上查看

I would like to make a transparent cut out half circle shape using only CSS3. The only requirement is that all the elements that form the shape must be black or transparent.

I cannot use a black rectangle with a white circle on top of it because the half circle has to be transparent and let the background show through.

Desired shape :

解决方案

May be can do it with CSS :after pseudo property like this:

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);
}

<div class="rect">&nbsp;<span class="circle"></span></div>

View on JSFiddle

这篇关于从 div 中切出的透明半圆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！