CSS从矩形形状切出圆CSS从矩形形状切出圆(CSS Cut out circle from a r

我设法达到这种效果： http://jsfiddle.net/6z3msdwf/1/但我不与标记真的很高兴。 此外，还有在IE 10/11的怪异的臭虫当你调整窗口大小显示1px的差距。

是否有任何其他方式做到这一点？ 或者，也许解决这个问题一个在IE中。

编辑圈子不得使用边界，它应该是透明的。

 body, html { font-size: 18px; } body { background-color: #fff } .avatar { width: 90px; height: 90px; position: absolute; background-color: red; top: -115px; left: 5px; border-radius: 80px; } .wrap { display: block; margin: 100px auto 0 auto; width: 90%; position: relative; } .rect-left, .rect-right { position: relative; width: 50%; height: 150px; float: left; } .rect-left { margin-left: -50px; } .rect-right { margin-right: -50px; } .inner { position: absolute; top: 0; left: 50px; right: 0; bottom: 0; height: 100%; background: rgba(0, 0, 0, 0.8); } .rect-left .inner { left: 50px; right: 0; -webkit-border-top-left-radius: 6px; -webkit-border-bottom-left-radius: 6px; -moz-border-radius-topleft: 6px; -moz-border-radius-bottomleft: 6px; border-top-left-radius: 6px; border-bottom-left-radius: 6px; } .rect-right .inner { left: 0; right: 50px; -webkit-border-top-right-radius: 6px; -webkit-border-bottom-right-radius: 6px; -moz-border-radius-topright: 6px; -moz-border-radius-bottomright: 6px; border-top-right-radius: 6px; border-bottom-right-radius: 6px; } .rect { float: left; height: 100px; width: 100px; background: rgba(0, 0, 0, 0.8); position: relative; top: 50px; } .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: -110px; left: -40px; border: 40px solid rgba(0, 0, 0, 0.8); } 

 <div class="wrap"> <div class="rect-left"> <div class="inner"></div> </div> <div class="rect">&nbsp;<span class="circle"></span> <div class="avatar"></div> </div> <div class="rect-right"> <div class="inner"></div> </div> </div> 

Answer 1:

您可以通过使用一个单一的元素（加上一个伪元素）做到这一点radial-gradient背景的父元素，而伪元素创建圆。

 div:before { /* creates the red circle */ position: absolute; content: ''; width: 90px; height: 90px; top: -75px; /* top = -75px, radius = 45px, so circle's center point is at -30px */ left: calc(50% - 45px); background-color: red; border-radius: 50%; } div { position: relative; margin: 100px auto 0 auto; width: 90%; height: 150px; border-radius: 6px; /* only the below creates the transparent gap and the fill */ background: radial-gradient(50px 50px at 50% -30px, rgba(0, 0, 0, 0) 49.5px, rgba(0, 0, 0, .8) 50.5px); /* use same center point as with concentric circles but larger radius */ } /* just for demo */ body, html { font-size: 18px; } body { background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%); } 

 <div></div> 

Answer 2:

你可以使用一个圆形渐变

 div { height: 150px; margin: 5em 2em; background: radial-gradient(circle at top center, transparent, transparent 70px, black 70px, black); border-radius: 8px; position: relative; } .circle { width: 120px; height: 120px; background: red; border-radius: 50%; position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); } body { background-image: url(http://www.fillmurray.com/1000/1000); background-size: cover; } 

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

Answer 3:

随着联SVG也很简单：

• 一个圆元件
• 一个路径元素与弧COMAND为缩进圆

 body{background:url('http://i.imgur.com/5NK0H1e.jpg');background-size:cover; svg{display:block;} 

 <svg viewbox="0 0 10 3.5"> <path d="M4.2 1 A0.85 0.85 0 0 0 5.8 1 H10 V3.5 H0 V1z" fill="#333" /> <circle cx="5" cy="0.7" r="0.7" fill="red" /> </svg> 

或者，如果你真的想使用CSS，就可以实现与描述的方法形状： 透明半环切出一个div的 。
请注意，代码比SVG方法长得多：

 .container{ position:relative; height:250px; text-align:center; } .circle{ position:relative; display:inline-block; width:100px; height:100px; background:red; border-radius:50%; z-index:2; } .rect{ position:absolute; top:50px; left:0; width:100%; height:200px; border-radius:10px; overflow:hidden; z-index:1; } .rect:before{ content:''; position:absolute; top:-60px; left:50%; margin-left:-60px; width:120px; height:120px; border-radius:50%; box-shadow:0 0 0 99999px #333; } body{background:url('http://i.imgur.com/5NK0H1e.jpg');background-size:cover; 

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

文章来源: CSS Cut out circle from a rectangular shape