Hay que reconocer que a la mayoría de nosotros nos gustan las cosas fáciles. Por ejemplo, cuando queremos agregar una forma o figura geométrica en nuestro sitio web, solemos hacerlo descargando esa imagen en cualquier formato (PNG, SVG, etc.) y luego insertamos esa imagen en HTML.
Pero hay otra manera de agregar figuras geométricas en HTML y es todavía una forma más rápida y más fácil de insertarlas.
En efecto, no hay que adivinar nada porque lo pone en el título de este mismo artículo. Estamos hablando de crear formas y figuras geométricas en CSS. Así que a continuación, veremos algunas de las formas y figuras más simples y luego iremos subiendo el nivel un poco más, sin pasarnos, no vamos a hacer figuras muy complejas en esta ocasión.
Formas y Figuras Geométricas en CSS
Vamos a hacer unos ejemplos sencillos de figuras geométricas en CSS, que puedes insertar en tu sitio web de forma fácil, las puedes adaptar fácilmente, cambiar el color, etc.
Por si te da un poco de pereza leerte el post, aquí te dejo el vídeo donde lo explico, bastante bien por cierto.
Cuadrado en CSS
Empecemos por el principio, la primera forma que debemos conocer es el cuadrado. Y no porque sea la figura geométrica más fácil de hacer (que también), sino porque además, es la base para la gran mayoría de formas que veremos a continuación.
Primero haremos un contenedor o “div”, para crear la forma.
<div class="cuadrado"></div>En este caso, le pongo la clase cuadrado. Como ves, es algo muy sugerente.
Luego vamos a aplicar los estilos CSS, utilizando la misma clase obviamente.
.cuadrado{
width: 250px;
height: 250px;
background-color: aqua;
}
Y de esta manera tan fácil ya tendríamos nuestro cuadrado hecho.
Rectángulo
Para crear un rectángulo en CSS, haremos lo mismo que el cuadrado, pero con dos de los lados más largos. Primero crearemos un div en HTML y luego ya podremos pasar a los estilos.
<div class="rectangulo"></div>Podemos hacerlo de la siguiente manera para que quede más ancho que alto.
.rectangulo{
width: 500px;
height: 250px;
background-color: orange;
}
Si por el contrario, queremos que sea más alto que ancho, solo deberemos intercambiar los valores de width y height (anchura y altura):
.rectangulo{
width: 250px;
height: 500px;
background-color: orange;
}
¿Fácil, no?
Triángulo en CSS
Ahora vamos a crear un triángulo en CSS. Aquí la cosa se complica un poquito más, ya que a simple vista, no es tan lógico como el cuadrado, donde hay claramente una base y una altura.
Aquí vamos a jugar un poco con los bordes para crear el triángulo, como verás a continuación. .
Un triángulo, como cualquier figura geométrica, se puede hacer de varias maneras. Es posible que veas otras maneras de hacerlo en otros sitios.
Primero y como siempre, haremos un contenedor para trabajar con la clase. En este caso será con la clase triangulo (o la clase que tu quieras).
<div class="triangulo"></div>Luego escribiremos los estilos de la clase y haremos un par de truquitos para hacer el triángulo perfecto.
.triangulo{
width: 0;
height: 0;
border-left: 250px solid transparent;
border-right: 250px solid transparent;
border-bottom: 500px solid aqua;
}
Como ves, no es muy complicado hacer un triángulo cuando lo ves hecho. Lo único que tenemos que tener en cuenta es que si queremos que sea un triángulo con los tres lados iguales, deberemos utilizar la mitad de la anchura del borde inferior.
Rombo en CSS
Para hacer un Rombo en CSS he de reconocer que haremos un poco de trampa. Lo que haremos será partir de la base del cuadrado (como casi siempre) y luego lo giraremos un poco.
Vamos con el contenedor, con la clase rombo.
<div class="rombo"></div>Ahora haremos un cuadrado y lo giraremos como hemos comentado. Para hacer esto último utilizaremos la propiedad transform y le pasaremos el valor rotate con los grados que queramos.
.rombo{
width: 200px;
height: 200px;
background-color: aquamarine;
transform: rotate(45deg);
}
Si quisiéramos hacer el rombo un poco más alargado, para que no se vea tan “cuadrado” lo haremos de la siguiente manera, con el valor skew(), dentro de la propiedad de transform.
.rombo{
width: 200px;
height: 200px;
background-color: aquamarine;
transform: rotate(45deg) skew(20deg,20deg);
}
Y así es como podemos hacer un rombo, de la manera más “tonta”.
Círculo en CSS
Probablemente los círculos en CSS son una de las formas geométricas más recurrentes en los diseños web. Se suele utilizar mucho en fotos de perfil, para iconos y demás elementos. Es tan fácil de hacer que no necesitarás descargar nunca más ningúna imagen de un círculo, ni nada por el estilo. ¡A partir de ahora lo harás con CSS!
Como siempre, empezamos con el div y la clase.
<div class="circulo"></div>Luego creamos un cuadrado y le añadimos la propiedad de border-radius para hacerlo redondo.
.circulo{
width: 250px;
height: 250px;
background-color: aqua;
border-radius: 50%;
}
Y así de fácil se hace un círculo en CSS.
Si quieres que el círculo tenga una forma completamente redonda, deberás poner una altura y una anchura igual. Si no, la circunferencia quedará ovalada.
Paralelogramo en CSS
Veamos ahora cómo hacer un paralelogramo en CSS. Primero, creamos el div para trabajar con la clase.
<div class="paralelogramo"></div>Como no podía ser de otra manera, partiremos de un cuadrado para hacer esta forma, luego usaremos la propiedad transform y le pasaremos un calor de skew();
.paralelogramo{
width: 250px;
height: 150px;
background-color: aquamarine;
transform: skew(20deg);
}
Podemos cambiar la inclinación de los lados mediante el valor de skew().
Trapecio en CSS
Para crear un trapecio en CSS, ya sabes partiremos de un cuadra… ¡Es broma! Esta vez, no partiremos de un cuadrado como tal, veámoslo.
<div class="trapecio"></div>Aunque si tenemos la propiedad de width y height, pero el método es parecido a hacer un triangulo en css.
.trapecio{
width: 500px;
height: 0;
border-right: 100px solid transparent;
border-left: 100px solid transparent;
border-bottom: 250px solid aqua;
}
Si lo queremos hacer a la inversa, es decir el borde superior más largo, en vez de usar border-bottom: 250px solid aqua; usaremos border-top;250px solid aqua;
Huevo en CSS
Nunca se sabe si alguna vez deberás crear un huevo en CSS. Quizás algún día te toca hacer la página web de huevos de pascua o el sitio web de una granja de gallinas. Sea como sea, vamos a ver como se hace esta curiosa figura.
<div class="huevo"></div>Una vez que hemos hecho el div para trabajar con la clase huevo realizaremos una especie de circunferencia ovalada, dándole una altura mayor que la anchura y modificando todos los bordes.
.huevo{
width: 200px;
height: 275px;
background: burlywood;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
Y así de simple se crea un huevo.
Crear Luna en CSS
Y para acabar, vamos a hacer una forma de luna en CSS. Como siempre, añadiendo una clase a un div para poder trabajar con ésta.
<div class="luna"></div>Una vez creado el contenedor con la clase ya podemos hacer la circunferencia, como si se tratara de un círculo normal en CSS. Y a continuación, le daremos un box-shadow para crear la forma de luna.
.luna{
width: 250px;
height: 250px;
border-radius: 50%;
box-shadow: 50px 25px #f2f2f2;
}
Y así es como puedes hacer una Luna en CSS de forma muy fácil. Si quieres que sea más grande, más fina o lo que sea, puedes ir jugando con las medidas del box-shadow, incluso con el color, como último valor.
Siempre hay más de una manera de hacer formas y figuras geométricas en CSS, por eso, es posible que veas algunas de las formas que hemos visto en otro sitio de forma más compleja o diferentes.
Espero que te haya gustado este pequeño tutorial sobre como hacer formas mediante la hojas de estilos y ya sabes, la próxima vez que te vayas a descargar una figura geométrica o una forma en una imagen y colocarla en HTML ¡Piénsatelo dos veces antes de hacerlo! Ahora ya sabes una manera fácil y práctica de integrar estas formas en tu sitio web, sin tener que cargar una imagen en HTML.
¿Quieres aprender a hacer algún tipo de forma específica? ¿Tienes alguna duda o no te ha quedado claro alguna cosa? ¡Déjamelo en los comentarios de abajo y te responderé lo más rápido que pueda.!