透明的半圆切出一个div
我只想用CSS3做一个透明的半圆形切割。 唯一的要求是形成形状的所有元素 必须是黑色或透明的 。
我不能用一个白色圆圈的黑色矩形，因为半圆要透明，让背景透明。
所需形状：
也许可以用CSS做到这一点:after伪属性如下所示：
.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); }
http://jsfiddle.net/FcaVX/2/
您可以使用方块阴影来制作透明切出的圆圈 ：
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; }
<div></div> <div class="transparent"></div>
使用SVG：
这是一个使用SVG的替代解决scheme（虽然你没有标记）。 使用SVG的优点是：
- 与径向渐变相比，它具有更好的浏览器支持。
- 与盒子阴影方法不同，SVG可以支持形状内的图像。
虽然SVG不被<= IE8支持，而box-shadow是可以提供回退的。
svg { height: 150px; width: 150px; } polygon { fill: black; } /* Just for demo */ body { background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%); }
<!-- Sample 1 - Using Clip Path --> <svg viewBox='0 0 100 100' preserveAspectRatio='none'> <defs> <clipPath id='clipper'> <path d='M0,0 a50,50 0 1,0 100,0 l 0,100 -100,0' /> </clipPath> </defs> <polygon points='0,0 100,0 100,100 0,100' clip-path='url(#clipper)' /> </svg> <!-- Sample 2 - Using Path --> <svg viewBox='0 0 100 100' preserveAspectRatio='none'> <pattern id='bg' width='100' height='100' patternUnits='userSpaceOnUse'> <image xlink:href='http://lorempixel.com/100/100/nature/1' height='100' width='100' /> </pattern> <path d='M0,0 a50,50 0 1,0 100,0 l 0,100 -100,0 0,-100' fill='url(#bg)' /> </svg>
你可以很容易地用径向渐变来做到这一点。
DEMO
结果 ：
HTML ：
<div class='shape'></div>
相关的CSS ：
.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%); }
有关兼容性的详细信息，请参阅http://caniuse.com/#feat=css-gradients 。
凯尔Sevenokas做了一些很好的工作。 我build立了这个。 检出http://jsfiddle.net/FcaVX/1/
我基本上把这个白色的圆圈倒了出来，给了它白色的边框。 OP问题讨论了构成形状的颜色元素; 没有关于它的边界吗？
我只需要在响应式图像底部的圆angular。 我从@sandeep小提琴开始，并改进它以满足我的需求：
.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
现在，我能想到的唯一方法就是在不同的高度旁边使用很多1像素宽的黑色div。 这在技术上是可行的，但应该深深地被折磨。 也; 除非您想要添加1×1像素div并手动执行反锯齿，否则不会有反锯齿。
如果你举了一个你想如何使用的例子，可能会更有帮助。 为什么只需要黑色/透明？ 正如omarello所说，在大多数情况下最好的解决scheme可能是一个简单的GIF或PNG图像的透明度。
