CSS 3 Forma: "Círculo Inverso" o " Cortar Círculo"

Question

CSS 3 Forma: "Círculo Inverso" o " Cortar Círculo"

Quiero crear una forma, que describiría como "círculo inverso":

Forma CSS

La imagen es de alguna manera inexacta, porque la línea negra debe continuar a lo largo del borde exterior del elemento div.

Aquí está una demostración de lo que tengo en este momento: http://jsfiddle.net/n9fTF /

¿Es eso posible con CSS sin imágenes?

40

css css3 css-shapes

Author: web-tiki, 2012-05-08

Source

6 answers

Realmente no puedo decir por su dibujo lo redondeado que desea los puntos, pero aquí hay una posibilidad: http://jsfiddle.net/n9fTF/6 /

Si los puntos necesitan ser más redondeados, tendrás que poner algunos círculos en los extremos para que se mezclen con la cuchara grande.

8

Author: Chris Fletcher,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-05-08 15:27:38

Enfoque diferente: Caja-sombras

Este enfoque utiliza sombras de caja CSS que son compatibles con IE9+ (canIuse )

DEMO

Salida:

CSS shape with inset curve using box-shadows

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;
}

5

Author: web-tiki,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-07-15 19:33:30

Esta es una pregunta muy interesante. Recientemente he publicado un tutorial sobre cómo hacer Radio de Borde inverso en CSS (aquí) y creo que esto podría adaptarse fácilmente para su caso.

El truco es crear un intervalo que genere el borde inverso utilizando un concepto muy simple: bordes muy gruesos. Y usa la sección interior escondiéndolos. Lo que tendría que hacer además de mi script proporcionado es agregar otro radio de borde a la esquina superior izquierda, ya que solo estoy usando el arriba a la derecha. Haga el span alineado a la izquierda del elemento que desea por posicionamiento absoluto, y aumente la altura/anchura del span en consecuencia y voila tiene su radio de borde inverso.

1

Author: Jon Mifsud,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-07-14 12:32:15

Alguien más lo hizo en algún lugar de lo que encontré...

JSFiddle: http://jsfiddle.net/ajeN7 /

Y la pregunta: CSS3 Esquina Redondeada Invertida

Esperemos que eso ayude!

0

Author: Rick Donohoe,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 11:46:58

Introduzca un círculo blanco sin bordes absolutamente posicionado que se sienta detrás del círculo gris en un desplazamiento. Tendrá que establecer el índice z del círculo oscuro para asegurarse de que se encuentra por encima del círculo blanco:

#c {
    position: absolute;
    border: 0;
    left: 30px;
    width: 100px;
    height: 100px;
    border-radius: 50px;
    background: white;
}

Demo.

0

Author: karim79,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-05-08 15:27:43

score 52 · Accepted Answer

Actualización: Opción de Gradiente de Fondo Radial CSS3

(Para aquellos navegadores que lo soportan tested probado en FF y Chrome I IE10, Safari también debería funcionar).

Un "problema" con mi respuesta original es aquellas situaciones en las que uno no tiene un fondo sólido contra el que está trabajando. Esta actualización crea el mismo efecto permitiendo un "espacio" transparente entre el círculo y su recorte inverso.

Ver ejemplo fiddle .

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

Tomó más esfuerzo del que esperaba para que la indexación z funcionara (esto parece ignorar el índice z negativo ), sin embargo, esto le da un aspecto limpio y agradable (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;
}