superwinner superwinner - 7 months ago 57
HTML Question

CSS Cut out circle from a rectangular shape

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>




Answer

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>

Comments