html - CSS Cortar círculo de una forma rectangular

css3 css-shapes

Question

Logré lograr este efecto: http://jsfiddle.net/6z3msdwf/1/ pero no estoy muy contento con el marcado. Además, hay un error extraño en IE 10/11 donde se muestra un espacio de 1px cuando cambia el tamaño de la ventana.

Hay alguna otra manera de hacer esto? O tal vez arreglar esto en IE.

EDITAR El círculo no debe usar un borde, debe ser transparente.

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

Con un svg en línea es muy simple:

• un elemento circular
• un elemento de ruta con un comando de arco para el círculo sangrado

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>

O si realmente desea usar CSS, puede lograr la forma con el enfoque descrito en: Medio círculo transparente cortado de un div .
Tenga en cuenta que el código es mucho más largo que el enfoque 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

Podrías usar un degradado circular

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

Puede hacer esto usando un solo elemento (más un pseudo elemento) usando radial-gradient fondo de radial-gradient para el elemento padre mientras el pseudo-elemento crea el círculo.

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>