Nils Binder tiene la primicia sobre cómo manipular elementos usando border-radius pasando ocho valores a la propiedad así:
.element {
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}Esta es una técnica tan genial que también desarrolló una pequeña aplicación web llamada Fancy-Border-Radius para ver cómo funcionan esos valores en la práctica. Te permite manipular la forma de la forma que quieras y luego copiar y pegar ese código directamente en tus diseños:
Genial, ¿eh? Creo que esta técnica es potencialmente muy útil si no desea tener un SVG que envuelva algún contenido, ya que últimamente he visto un montón de sitios web que usan “blobs” como elementos gráficos y esta es sin duda una nueva forma interesante de hacerlo. . Pero también me hace preguntarme cuántas propiedades CSS relativamente antiguas y familiares tienen algo furtivo que está oculto y esperándonos.
También tenemos una herramienta para jugar que podría ayudarlo a comprender las posibilidades:
Vea el Pen All the border-radius’ de Chris Coyier (@chriscoyier) en CodePen.
Enlace directo →