我想只使用CSS3制作一个透明的半圆形。唯一的要求是所有构成形状的元素必须是黑色或透明的**。我不能使用一个黑色的矩形与白色的圆圈在它的顶部,因为半圆必须是透明的,让背景显示通过。所需形状:
jrcvhitl1#
可以用CSS ::after伪属性来实现,如下所示:
::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); }
<div class="rect"> <span class="circle"></span></div>
View on JSFiddle
mm9b1k5b2#
您可以使用框形阴影使透明剪切圆:
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>
这可以是响应长度百分比:一个二个一个一个
f4t66c6m3#
下面是一个使用SVG的替代解决方案(尽管您还没有标记它)。使用SVG的优点是:
虽然〈= IE8不支持SVG而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>
CSS也有clip-path规范,我们可以尝试类似下面的代码片段。一个二个一个一个但与SVG clip-path不同的是,纯CSS版本(也就是说,不使用内联或外部SVG)似乎不能支持path,它只支持形状,因此在本例中,如果您直接在父对象上使用clip-path,它只会生成一个椭圆(如代码片段所示)。为了克服这个问题,我们必须将clip-path放在一个子元素(或伪元素)上,这将意味着clipped区域将不是透明的。
clip-path
path
使用画布也可以做到同样的事情。画布命令和SVG非常相似,它们的优点也非常相似。但是,画布是基于光栅的,因此缩放效果不如SVG。
window.onload = function() { /* Canvas example with path */ var canvas = document.getElementById('canvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); var img = new Image(); img.src = 'http://lorempixel.com/150/300'; ctx.beginPath(); ctx.moveTo(110, 0); ctx.arc(60, 0, 50, 0, 3.14, false); ctx.lineTo(10, 145); ctx.lineTo(110, 145); ctx.closePath(); ctx.fill(); /* Use below for using image as a fill */ /*img.onload = function(){ var ptrn = ctx.createPattern(img,'no-repeat'); ctx.fillStyle = ptrn; ctx.fill(); }*/ } /* Canvas example with clip path */ var canvasClip = document.getElementById('canvas-clip'); if (canvasClip.getContext) { var ctxClip = canvasClip.getContext('2d'); ctxClip.beginPath(); ctxClip.moveTo(10, 145); ctxClip.lineTo(10, 0); ctxClip.arc(60, 0, 50, 0, Math.PI * 2, true); ctxClip.lineTo(110, 145); ctxClip.lineTo(10, 145); ctxClip.clip(); ctxClip.fillStyle = 'tomato'; ctxClip.fill(); } }
canvas { height: 150px; width: 300px; } /* Just for demo */ body { background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%); }
<canvas id='canvas'></canvas> <canvas id='canvas-clip'></canvas>
这个形状也可以使用CSS(或)SVG掩码创建。CSS掩码的支持非常差,目前只能在Webkit驱动的浏览器中工作,但SVG掩码有更好的支持,应该可以在IE9+中工作。
/* CSS Mask */ .shape { width: 150px; height: 150px; background-color: black; -webkit-mask-image: radial-gradient(circle closest-corner at 50% 0%, transparent 98%, white 99%); mask-image: radial-gradient(circle closest-corner at 50% 0%, transparent 98%, white 99%); } /* End of CSS Mask */ svg { height: 150px; width: 150px; } polygon#shape { fill: black; mask: url(#masker); } /* Just for demo */ body { background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%); }
<!-- CSS Mask --> <div class='shape'></div> <!-- SVG Mask --> <svg viewBox='0 0 100 100' preserveAspectRatio='none'> <defs> <mask id='masker' x='0' y='0' width='100' height='100'> <polygon points='0,0 100,0 100,100 0,100' fill='#fff' /> <circle r='50' cx='50' cy='0' fill='#000' /> </mask> </defs> <polygon points='0,0 100,0 100,100 0,100' id='shape' /> </svg>
iszxjhcz4#
你可以很容易地用径向渐变来实现。∮ ∮ ∮
<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%); }
有关兼容性的详细信息,请访问www.example.com。http://caniuse.com/#feat=css-gradients for detailed info on compatibility.
kyvafyod5#
试试这个。
body{ background-color:#333; passing:0px; height:0px; } #app{ background:#333 url('https://source.unsplash.com/random') no-repeat; background-size:cover; width:360px; height:560px; position:relative; overflow:hidden; } .app-bar{ width:100%; height:50px; position:absolute; bottom:0px; left:0; } .app-bar .bar{ line-height:50px; position:relative; width:100%; height:50px; background-image: radial-gradient(circle 35px at 315px 0, transparent 700px, #f44336 50px); } .app-bar .bar i{ color:#FFF; display:block; line-height:50px; float:left; width:50px; text-align:center; cursor:pointer; margin-top:0px; } .app-bar .bar i:hover{ background-color:rgba(0,0,0,.1); } .app-bar .bar button{ padding:0px; box-sizing:border; text-align:center; margin:0px; bordeR:0px; outline:0px; width:60px; height:60px; line-height:60px; cursor:pointer; color:#FFFFFF; display:block; border-radius:50%; position:absolute; top:-30px; left:100%; margin-left:-75px; background-color:#f44336; transition: all .2s ease; } .app-bar .bar button span{ line-height:60px; font-size:30px; } .app-bar .bar button:hover{ transform:rotate(45deg); transition: all .2s ease; }
<div id="app"> <div class="app-bar"> <div class="bar"> <i class="material-icons">menu</i> <i class="material-icons">search</i> <button class="button"> <span class="material-icons">add</span> </button> </div> </div> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.1/iconfont/material-icons.min.css" >
nue99wik6#
凯尔Sevenokas做了一些很好的工作。我在此基础上进行了构建。查看http://jsfiddle.net/FcaVX/1/我基本上折叠了圆形的白色div并给它白色边框。OP问题讨论了组成形状的颜色元素;没有关于它的边界,对吗?
0kjbasz67#
我只需要在响应图像的底部添加圆角。我从@sandeep fiddle开始,并根据我的需要进行了改进:
.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
https://jsfiddle.net/mop00j22/
gc0ot86w8#
现在,我能想到的唯一方法是使用许多1像素宽的黑色div,它们彼此相邻,高度不同。这种方法在技术上是可行的,但应该深深地皱眉。你不会有抗锯齿,除非你想通过添加1x 1像素的div和手动做抗锯齿的麻烦。如果你能给出一个例子来说明如何使用它,可能会更有帮助。为什么它只需要是黑色/透明的呢?正如omarello所说,大多数情况下最好的解决方案可能是一个简单的透明GIF或PNG图像。
8条答案
按热度按时间jrcvhitl1#
可以用CSS
::after
伪属性来实现,如下所示:View on JSFiddle
mm9b1k5b2#
您可以使用框形阴影使透明剪切圆:
这可以是响应长度百分比:
一个二个一个一个
f4t66c6m3#
下面是一个使用SVG的替代解决方案(尽管您还没有标记它)。使用SVG的优点是:
虽然〈= IE8不支持SVG而box-shadow支持,但可以提供回退。
CSS也有
clip-path
规范,我们可以尝试类似下面的代码片段。一个二个一个一个
但与SVG clip-path不同的是,纯CSS版本(也就是说,不使用内联或外部SVG)似乎不能支持
path
,它只支持形状,因此在本例中,如果您直接在父对象上使用clip-path
,它只会生成一个椭圆(如代码片段所示)。为了克服这个问题,我们必须将clip-path放在一个子元素(或伪元素)上,这将意味着clipped区域将不是透明的。使用画布也可以做到同样的事情。画布命令和SVG非常相似,它们的优点也非常相似。但是,画布是基于光栅的,因此缩放效果不如SVG。
这个形状也可以使用CSS(或)SVG掩码创建。CSS掩码的支持非常差,目前只能在Webkit驱动的浏览器中工作,但SVG掩码有更好的支持,应该可以在IE9+中工作。
iszxjhcz4#
你可以很容易地用径向渐变来实现。
∮ ∮ ∮
相关CSS:
有关兼容性的详细信息,请访问www.example.com。http://caniuse.com/#feat=css-gradients for detailed info on compatibility.
kyvafyod5#
试试这个。
nue99wik6#
凯尔Sevenokas做了一些很好的工作。我在此基础上进行了构建。查看http://jsfiddle.net/FcaVX/1/
我基本上折叠了圆形的白色div并给它白色边框。OP问题讨论了组成形状的颜色元素;没有关于它的边界,对吗?
0kjbasz67#
我只需要在响应图像的底部添加圆角。我从@sandeep fiddle开始,并根据我的需要进行了改进:
https://jsfiddle.net/mop00j22/
gc0ot86w8#
现在,我能想到的唯一方法是使用许多1像素宽的黑色div,它们彼此相邻,高度不同。这种方法在技术上是可行的,但应该深深地皱眉。你不会有抗锯齿,除非你想通过添加1x 1像素的div和手动做抗锯齿的麻烦。
如果你能给出一个例子来说明如何使用它,可能会更有帮助。为什么它只需要是黑色/透明的呢?正如omarello所说,大多数情况下最好的解决方案可能是一个简单的透明GIF或PNG图像。