CSS从矩形中剪切出圆 [英] CSS Cut out circle from a rectangular shape

问题描述

我设法达到了这个效果： http://jsfiddle.net/6z3msdwf/1/ 但我不是真的很高兴的标记。此外，在IE 10/11中有一个奇怪的错误，当你调整窗口大小时显示1px的差距。

有没有其他方法来做到这一点？

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

  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;宽度：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;}。 top：0; left：50px; right：0; bottom：0;高度：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）;位置：相对; 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>  

解决方案

您可以使用 radial-gradient 背景为父元素使用单个元素（加上伪元素），而伪元素创建

< pre =snippet-code-css lang-css prettyprint-override> div：before {/ *创建红色圆圈* / position：absolute; content：''; width：90px; height：90px; top：-75px; / * top = -75px，radius = 45px，所以圆的中心点在-30px * / left：calc（50％ - 45px）; background-color：red; border-radius：50％;} div {position：relative; margin：100px auto 0 auto;宽度：90％; height：150px; border-radius：6px; / *下面只创建透明间隙和填充* / background：radial-gradient（50px 50px 50％-30px，rgba（0，0，0，0）49.5px，rgba（0，0，0， 8）50.5px）; / *使用与同心圆相同的中心点，但是更大的半径* /} / *仅适用于演示* / body，html {font-size：18px;} body {background-image：radial-gradient（circle，＃3F9CBA 0％ ，＃153346 100％）;}

 < div& < / div>  

[/ div>

I managed to achieve this effect: http://jsfiddle.net/6z3msdwf/1/ but I am not really happy with the markup. Also, there is an weird bug in IE 10/11 where a 1px gap is shown when you resize the window.

Is there any other way to do this? Or maybe fix this one in IE.

EDIT The circle must not use a border, it should be transparent.

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>

解决方案

You can do this using a single element (plus a pseudo element) using radial-gradient background for the parent element while the pseudo-element creates the circle.

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>

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