w3schools - shapes css html
Forma CSS 3: "Círculo inverso" o "Círculo recortado" (6)
Quiero crear una forma, que describiría como "círculo inverso":
La imagen es de alguna manera inexacta, porque la línea negra debe continuar a lo largo del borde exterior del elemento div.
Aquí hay una demostración de lo que tengo en este momento: http://jsfiddle.net/n9fTF/
¿Es eso posible con CSS sin imágenes?
Actualización: Opción de gradiente de fondo radial CSS3
(Para aquellos navegadores que lo soportan - probado en FF y Chrome - IE10, Safari debería funcionar también).
Un "problema" con mi respuesta original es aquellas situaciones en las que uno no tiene un fondo sólido contra el que están trabajando. Esta actualización crea el mismo efecto y permite un "espacio" transparente entre el círculo y su recorte inverso.
Ver ejemplo violín .
CSS
.inversePair {
border: 1px solid black;
display: inline-block;
position: relative;
height: 100px;
text-align: center;
line-height: 100px;
vertical-align: middle;
}
#a {
width: 100px;
border-radius: 50px;
background: grey;
z-index: 1;
}
#b {
width: 200px;
/* need to play with margin/padding adjustment
based on your desired "gap" */
padding-left: 30px;
margin-left: -30px;
/* real borders */
border-left: none;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 20px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
/* the inverse circle "cut" */
background-image: -moz-radial-gradient(
-23px 50%, /* the -23px left position varies by your "gap" */
circle closest-corner, /* keep radius to half height */
transparent 0, /* transparent at center */
transparent 55px, /*transparent at edge of gap */
black 56px, /* start circle "border" */
grey 57px /* end circle border and begin color of rest of background */
);
background-image: -webkit-radial-gradient(-23px 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, black 56px, grey 57px);
background-image: -ms-radial-gradient(-23px 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, black 56px, grey 57px);
background-image: -o-radial-gradient(-23px 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, black 56px, grey 57px);
background-image: radial-gradient(-23px 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, black 56px, grey 57px);
}
Respuesta original
Me tomó más esfuerzo de lo que esperaba conseguir que la indexación z funcionara ( esto parece ignorar el índice z negativo ), sin embargo, esto le da una apariencia agradable y limpia (probado en IE9, FF, Chrome):
HTML
<div id="a" class="inversePair">A</div>
<div id="b" class="inversePair">B</div>
CSS
.inversePair {
border: 1px solid black;
background: grey;
display: inline-block;
position: relative;
height: 100px;
text-align: center;
line-height: 100px;
vertical-align: middle;
}
#a {
width: 100px;
border-radius: 50px;
}
#a:before {
content:'' '';
left: -6px;
top: -6px;
position: absolute;
z-index: -1;
width: 112px; /* 5px gap */
height: 112px;
border-radius: 56px;
background-color: white;
}
#b {
width: 200px;
z-index: -2;
padding-left: 50px;
margin-left: -55px;
overflow: hidden;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 20px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
}
#b:before {
content:'' '';
left: -58px;
top: -7px;
position: absolute;
width: 114px; /* 5px gap, 1px border */
height: 114px;
border-radius: 57px;
background-color: black;
}
Enfoque diferente: sombras de caja
Este enfoque utiliza sombras de caja CSS que son compatibles con IE9 + ( canIuse )
Salida:
HTML:
<div id="a">
<div id="b"></div>
</div>
CSS:
#a{
overflow:hidden;
border-radius:20px;
position:relative;
display:inline-block;
}
#a:before, #a:after{
content:'''';
width: 100px;
border-radius: 50%;
}
#a:before {
height: 100px;
float:left;
border: 1px solid black;
background: grey;
}
#a:after {
position:absolute;
left:14px; top:-6px;
height:114px;
box-shadow: 1px 0px 0px 0px #000, 110px 0px 0px 68px #808080;
background:none;
z-index:-1;
}
#b {
width: 200px;
height: 100px;
background:none;
margin-left:-15px;
border: 1px solid black;
border-left:none;
float:left;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
}
Alguien más lo hizo en algún lugar de lo que encontré ...
JSFiddle: http://jsfiddle.net/ajeN7/
y la pregunta: CSS3 Inverted Rounded Corner
¡Espero que eso ayude!
Esta es una pregunta muy interesante. Recientemente publiqué un tutorial sobre cómo hacer un radio de borde inverso en CSS (aquí) y creo que esto podría adaptarse fácilmente para su caso.
El truco consiste en crear un tramo que genere el borde inverso utilizando un concepto muy simple: bordes muy gruesos. Y usa la sección interior ocultándolos. Lo que tendría que hacer además de mi script provisto es agregar otro radio de borde a la esquina superior izquierda ya que solo estoy usando el de la esquina superior derecha. Haga el tramo alineado a la izquierda del elemento que desea mediante el posicionamiento absoluto, e incremente el ancho / alto del tramo en consecuencia y siempre que tenga el radio de borde inverso .
Introduzca un círculo blanco sin márgenes completamente posicionado que se encuentra detrás del círculo gris en una compensación. Tendrá que establecer el índice z del círculo oscuro para asegurarse de que se encuentra sobre el círculo blanco:
#c {
position: absolute;
border: 0;
left: 30px;
width: 100px;
height: 100px;
border-radius: 50px;
background: white;
}
Realmente no puedo decir por tu dibujo cuán redondeados quieres los puntos, pero aquí hay una posibilidad: http://jsfiddle.net/n9fTF/6/
Si los puntos deben ser más redondeados, deberás poner algunos círculos en los extremos para que se mezclen con la gran bola.