Cómo hacer formas geométricas en CSS

En este tutorial vamos a aprender a crear formas geométricas en CSS. Empezaremos por las figuras básicas como son los cuadrados, circulos, triángulos. Después de trabajar con estas formas básicas en CSS y dominarlas, continuararemos con otras derivadas como pueden ser rombos, trapecios y algunas otros dibujos divertidos. ¡Comencemos!

Dibujando formas geométricas en CSS

Gracias a potencial de CSS podemos dibujar diferentes figuras con muy pocas líneas de código. La idea como siempre es prescindir de imágenes y crearlas mediante CSS para aumentar la velocidad de carga de nuestra web.

Cuadrado y Rectángulos

Sin duda alguna tanto cuadrados como rectángulos son las figurás geométricas más fáciles de dibujar en CSS. Basta con declarar un bloque con una altura y anchura predeterminadas, así como el color del mismo.

.cuadrado {
     width: 100px; 
     height: 100px; 
     background: #000;
}

Podemos también prescindir del color de fondo y crearlo mediante bordes. Con lo cual tendríamos el siguiente ejemplo:

.cuadrado-2 {
     width: 100px; 
     height: 100px; 
     border: 3px solid #555;
}

Ahora vamos a cambiar las propiedades para dibujar un rectángulo en CSS. Cambiamos para ello tando el ancho como el alto y consguimos la siguiente figura.

Creando círculos con CSS

Dibujar un círculo en CSS es tan sencillo como agregar la propiedad border-radius.Si le aplicamos un 50% en los cuatro bordes obtendrémos nuestra circunferencia.

.circulo {
     width: 100px;
     height: 100px;
     -moz-border-radius: 50%;
     -webkit-border-radius: 50%;
     border-radius: 50%;
     background: red;
}

Jugando con los triángulos en CSS

CSS nos ofrece la posibilidad de definir cada uno de los cuatro bordes de un bloque de forma diferente. Gracias a ello podremos dibujar figuras derivadas de un cuadrado, y crear por ejemplo un triángulo.

.triangulo {
     width: 0;
     height: 0;
     border-right: 100px solid transparent;
     border-top: 10px solid transparent;
     border-left: 100px solid transparent;
     border-bottom: 100px solid #f0ad4e;
}

Podemos modificar la orientación de nuestro triángulo gracias a unas sencillas modificaciones. Por ejemplo, Jugando con cada uno de los bordes podemos girar nuestro triángulo.

.triangulo-2 {
     width: 0; 
     height: 0; 
     border-left: 100px solid #f0ad4e;
     border-top: 50px solid transparent;
     border-bottom: 50px solid transparent; 
}

Os dejo a modo de exámen el que cambiéis la orientación del triágunlo hacia abajo. ¿Has podido¿ ¡Seguro que sí!

Además de todo esto tenemos la posibilidad de combinar diferentes colores.

.triangulo-colores {
     width: 0; 
     height: 0; 
     border-left: 100px solid #428bca;
     border-top: 50px solid #f0ad4e;
     border-bottom: 50px solid #d9534f; 
}

Rombo con CSS

Para realizar nuestro rombo deberemos de crear un cuadrado, y posteriormente jugar con las propiedad transform y la función rotate de CSS.

.rombo {
     width: 100px; 
     height: 100px; 
     background: black;
     -webkit-transform: rotate(45deg);
     -moz-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
     -o-transform: rotate(45deg);
     transform: rotate(45deg);
}

Como crear un efecto Lightbox con CSS3

 

Ribbon

Otra de las conocidas formas muy utilizadas en CSS es la de Ribbon. Para conseguirla teclearemos el siguiente código.

.ribbon {
    width: 0px;
    height: 120px;
    border-left: 50px solid #d9534f;
    border-right: 50px solid #d9534f;
    border-bottom: 35px solid transparent;
}

Bonus

Por ultimo te recomiendo que visites este sitio donde podrás encontrar multitud de formas realizadas en CSS junto su código, con lo cual será muy fácil de imprementar en tu página web.