CSS从矩形切出圆形

小编典典

CSS从矩形切出圆形

html

我设法实现了这种效果但是我对标记并不满意。另外，在IE10/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>

阅读 615

2020-05-10

共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>

2020-05-10