CSS 从矩形中剪出圆形

Question

我设法实现了这个效果：http://jsfiddle.net/6z3msdwf/1/ 但我对标记不是很满意。此外，IE 10/11 中存在一个奇怪的错误，当您调整 window.

大小时会显示 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

有了 inline svg 就很简单了:

一个circle element
a path element with an arc 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，你可以通过Transparent half circle cut out of a 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>

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

您可以使用单个元素（加上伪元素）执行此操作，在伪元素创建圆的同时使用父元素的 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>

CSS 从矩形中剪出圆形

CSS Cut out circle from a rectangular shape

html

css

css-shapes