Crear formas complejas en programación es muy útil para liberar de la carga de imágenes un sitio web y mejorar por lo tanto, la velocidad de carga y con ello el posicionamiento de la página, además de que las formas no se pixelan por mas que se agrande su tamaño, en este artículo veremos como aprender a crear formas avanzadas con algunas propiedades nuevas de CSS3 como “border-radius”, el objetivo de este articulo no se limita a mostrar el código, sino a explicar como se construye un elemento que adapte una cierta forma utilizando solamente estilos CSS y conseguir que podamos ser capaces de crear cualquier forma que imaginemos por nosotros mismos.

Anchura y altura

Estas propiedades determinan en parte la forma que tendrá el elemento, ya que al aplicar otras propiedades, el elemento también se verá afectado visualmente por estos otros, para entenderlo mejor vamos a comenzar creando dos elementos DIV con el mismo código CSS en el que solamente cambiará la anchura del elemento.

Circulos y formas ovaladas

<div class="circulo"></div>
<div class="ovalo"></div>

Hemos creado dos elementos DIV con diferente clase, ahora crearemos los estilos, como vimos anteriomente, los estilos serán los mismos en los dos elementos a excepción de la anchura.

.circulo, .ovalo {
	background: #A1CC3A;
	border: 2px solid #888888;
	margin: 2%;
	height: 80px;
	border-radius: 50%;
}
.circulo {
	width: 80px;			
}
.ovalo {
	width: 150px;
}

Resultado

Hemos utilizado la propiedad “border-radius” para crear un borde redondeado con el valor “50%”, con esto conseguimos que el elemento tenga los bordes redondeados al máximo, no importa que el porcentaje sea más alto, ya abarcamos la mitad del elemento por cada lado, al 100% el resultado es el mismo, como vemos, solo hemos cambiado la anchura del elemento, entendida esta parte podemos pasar a las siguientes formas.

Circulos y ovalos complejos

Seguimos utilizando la propiedad “border-radius” para crear formas circulares mas complejas, para ello asignaremos porcentajes al valor de la misma, vamos a profundizar un poco mas en esta propiedad para entender como se comportan los elementos, la sintaxis de esta propiedad es la siguiente:

border-radius: 1-4 length|% / 1-4 length|%|initial|inherit;

Si asignamos un solo valor a esta propiedad, las cuatro esquinas tomarán el mismo borde, podemos asignar hasta cuatro valores para definir las cuatro esquinas del elemento.


border-radius: 10% (todas las esquinas);
border-radius: 10% (izquierda-arriba) 10% (derecha-arriba) 10% (derecha-abajo) 10% (izquierda-abajo);

Veamos un ejemplo:

.cuarto {
	background: #A1CC3A;
	border: 2px solid #888888;
	margin: 2%;
	height: 80px;
	border-radius: 0 100% 0 0;
	width: 80px;
}

Resultado:

En el código anterior, el valor que hemos asignado es “100%”, si hubiesemos asignado “50%” como en el primer ejemplo, la forma no sería completamente circular ( un cuarto de circulo ), ya que solo se hubiese curvado la mitad del ancho del elemento, esto es lo que debemos controlar, anchura, altura y radios.

Combinar los valores para crear un semicirculo

Es cierto que de momento no estamos creando formas muy complejas, pero es muy importante a la hora de hacerlo, controlar los terminos mencionados anteriormente, veamos ahora un semicirculo, creamos un elemento DIV con la clase “semicirculo” y le asignamos los siguientes estilos.

.semicirculo {
	background: #A1CC3A;
	border: 2px solid #888888;
	margin: 2%;
	height: 40px;
	border-top-left-radius: 50% 100%;
	border-top-right-radius: 50% 100%;
	width: 80px;
}

Lo mejor de esta propiedad de CSS3 es que nos permite combinar diferentes valores en la misma, en el código anterior hemos asignado dos valores a la propiedad “border-top-left-radius” y “border-top-right-radius”, el primer valor se aplica al ancho del elemento y el segundo valor al alto del elemento, existe otra forma de combinar los valores, vamos a crear algo un poco más complejo, un elemento en forma de huevo, creamos un nuevo elemento DIV con la clase “huevo”, el CSS para este elemento sería el siguiente:

.huevo {
	border-radius: 50% / 70% 70% 40% 40%;
	background: #A1CC3A;
	border: 2px solid #888888;
	margin: 2%;
	height: 100px;
	width: 80px;
}

Este es el resultado

La equivalencia del CSS anterior sería la siguiente:

.huevo {
	border-top-left-radius: 50% 70%;
	border-top-right-radius: 50% 70%;
	border-bottom-right-radius: 50% 40%;
	border-bottom-left-radius: 50% 40%; 
	background: #A1CC3A;
	border: 2px solid #888888;
	margin: 2%;
	height: 100px;
	width: 80px;
}

Combinando diferentes valores conseguimos formas mas complejas que un simple borde redondeado, vamos a ver otras formas que podemos crear usando la misma sintaxis, combinando los porcentajes y añadiendo alguna propiedad mas de CSS, en especial combinaremos “border-radius” y “box-shadow” en la mayoría de los casos, la sintaxis de la propiedad “border-radius” es la misma que hemos explicado durante todo el articulo:

Una capsula

Un limón

Una hoja

Una hamburguesa

Una aceituna

Un huevo

Un melón

A continuación os dejo el CSS de los alementos anteriores.

El CSS

.capsula {
	border-radius: 20px;
	background: linear-gradient(to right, #10ba00 0%, #10ba00 50%, #fc0505 51%, #ff0000 100%);
	border: 1px solid #999999;
	margin: 2%;
	height: 40px;
	width: 110px;
}
.limon {
	border-radius: 10% 100% 40% 100%;
	background: #FFFF00;
	border: 1px solid #888888;
	margin: 2%;
	height: 100px;
	width: 80px;
	box-shadow: 0px 0px 10px 10px #b8b800 inset;
}
.hoja {
	height: 100px;
	width: 100px;
	border-radius: 0 100% 0 100%;
	background: linear-gradient(45deg, #58ad5c 0%, #27662b 50%, #27662b 51%, #27662b 51%, #58ad5c 100%);
}	
.burguer {
	border-radius: 50%;
	background: #996600;
	border: 1px solid #663300;
	margin: 2%;
	height: 40px;
	width: 80px;
	box-shadow:  0px 2px #CC3300,  0px 10px #660000,  0px 12px #669900, 0px 19px #996600;
	 transform:skew(75deg,100deg));
}	
.oliva {
	border-radius: 40% 100% 40% 100%;
	background: #669900;
	border: 1px solid #333300;
	margin: 2%;
	height: 100px;
	width: 80px;
	box-shadow: 0px 0px 10px 10px #336600 inset;
}
.huevo {
	border-radius: 50% / 70% 70% 40% 40%;
	background: #FFE4AC;
	border: 1px solid #CCCCCC;
	margin: 2%;
	height: 100px;
	width: 80px;
	box-shadow: 0 0 60px rgba(0, 0, 0, 0.2) inset,
	-5px -5px 15px rgba(0, 0, 0, 0.1) inset;
}
.melon {
	border-radius: 100% / 95% 95% 95% 95%;
	background: linear-gradient(to bottom, #627d4d 0%, #2b4217 7%, #50693c 28%, #2b4217 52%, #50693c 74%, #2b4217 91%, #2b4217 100%);
	border: 1px solid #555555;
	margin: 2%;
	height: 60px;
	width: 90px;
	box-shadow: 0px 0px 15px 5px #2b4217 inset;
}

Espero que os haya servido de ayuda para comenzar a crear vuestras propias formas personalizadas, si os sirvió el articulo, no dudeis en compartirlo.

El código completo con todos los ejemplos de este articulo estan disponibles en mi cuenta de Github

Valoraciones


5 valoraciones

  • Guillem Bagur 31 julio, 2021

    Muy interesante! Gracias!!

  • Miguel Salinas 7 mayo, 2021

    gracias!!

  • Psycode 19 marzo, 2020

    Gracias! Muy buen aporte.

  • omar garcia 20 noviembre, 2019

    excelente tutorial

  • oksana 19 octubre, 2018

    impresionante!

Tu valoración


* Tu valoración puede tardar hasta 72 horas en publicarse.

He leido y acepto el Aviso legal y condiciones de uso

Utilizamos cookies propias necesarias para el correcto funcionamiento de la web y personalizar el contenido. No utilizamos cookies de terceros ni guardamos información personal sobre ti. Puedes encontrar más información en nuestra Política de cookies.

ACEPTAR
Aviso de cookies