soy Kseso y esto EsCSS

Esquinas biseladas puro Css

Esquinas biseladas puro Css

·Por Kseso ✎ 0

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

avatar del Editor del blog

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 Don Kseso Kseso