Esquinas biseladas puro Css 25.2.12
Esquinas biseladas puro Css
Usando gradientes radiales, se puede simular esquinas redondeadas con un radio negativo. Esto es, hacia el interior del elemento, tal como puedes ver en esta caja.
Y sí, la décima | 2em, #445E75 2.1em | de diferencia en los valores es importante. No se el porqué, pero si igualas el valor, el efecto desaparece.
Y el valor en background-size: 51% 51%; es para evitar un pixel que chrome deja sin cubrir en el fondo.
El efecto es algo tan sencillo como el siguiente código sólo prefijos -moz- y -webkit-)
.bisel {
font-size:.8em;
width: 80%;
margin: 10px auto;
padding: 1em 2.5em;
color: #00008B;
background-color: #BDACEF;
background:
-moz-radial-gradient(0 100%, circle, rgba(228,228,228,0) 2em, #445E75 2.1em),
-moz-radial-gradient(100% 100%, circle, rgba(228,228,228,0) 2em, #445E75 2.1em),
-moz-radial-gradient(100% 0, circle, rgba(228,228,228,0) 2em, #445E75 2.1em),
-moz-radial-gradient(0 0, circle, rgba(228,228,228,0) 2em, #445E75 2.1em);
background:
-webkit-radial-gradient(0 100%, circle, rgba(228,228,228,0) 2em, #BDACEF 2.1em),
-webkit-radial-gradient(100% 100%, circle, rgba(228,228,228,0) 2em, #BDACEF 2.1em),
-webkit-radial-gradient(100% 0, circle, rgba(228,228,228,0) 2em, #BDACEF 2.1em),
-webkit-radial-gradient(0 0, circle, rgba(228,228,228,0) 2em, #BDACEF 2.1em);
background-position: bottom left, bottom right, top right, top left;
-moz-background-size: 50% 50%;
background-size: 51% 51%;
background-repeat: no-repeat;
}
Explicando el código
background:
radial-gradient(0 100%, circle, rgba(228,228,228,0) 2em, #445E75 2.1em)
A poco que te hayas fijado en el código css verás que es realmente sencillo. Básicamente consiste en un gradiente que dibuja cuatro cuadrantes. Son cada una de las 4 declaraciones de radial-gradient.
Cada una de la propiedad radial-gradient de cada cuadrante dibuja un fondo con gradiente circular, desde su esquina correspondiente. Fíjate que sólo se declaran dos colores sin degradado en su transición, el primero en rgba y con el canal alpha en 0. Esto es, totalmente transparente.
Es lo que logra el bisel. Dejando ver el fondo de su contenedor padre.
Y por último el valor que sigue a cada color, en el ejemplo expresado en "em" es el radio del bisel.
Y, como decía al inicio, la diferencia de 1 décima (2em | 2.1em) he observado que es imprescindible. Si se declaran valores iguales la magia desaparece.
No me he parado a investigar la razón. Eso queda para los comentarios.
Y por último, cada uno de los cuatro background creados se colocan en su cuadrante correspondiente y se ajusta el tamaño a 1/4 mediante:
background-position: bottom left, bottom right, top right, top left;
-moz-background-size: 50% 50%;
background-size: 51% 51%;
Como curiosidad, ¿ves esa pequeña diferencia del 1% en el size?. Pues resulta que Chome si le das un tamaño del 50% no termina de cubrir todo el fondo, dejando dos líneas en forma de cruz de 1px sin teñir
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso