Formas geométricas con CSS (parte 1)

• Categorías
• /
• CSS
• /
• Formas geométricas con CSS (parte 1)

Con CSS y un poco de HTML e imaginación podemos crear cosas sorprendentes; una de estas cosas es lo posibilidad de crear formas geométricas como veremos a continuación.

Cuadrado con CSS

La más simple de todas las formas geométricas: el cuadrado, la podemos crear de la siguiente forma:

Código CSS:

.Cuadrado {
width: 100px;
height: 100px;
background: #08B;
}

Código HTML:

<div class="Cuadrado"></div>

Resultado:

Por definición un cuadrado tiene sus cuatro lados iguales, por lo tanto el ancho (width) debe ser igual al alto (height).

Rectángulo con CSS

El rectángulo es otra forma geométrica bastante fácil de crear; veamos:

Código CSS:

.Rectangulo {
   width: 100px;
   height: 200px;
   background: #08B;
}

Código HTML:

<div class="Rectangulo"></div>

Resultado:

Cambiando la anchura (width) o altura (height) para variar la forma del rectángulo.

Triángulo con CSS

El triángulo no es tan evidente como los casos anteriores; sin embargo es muy fácil de crear:

Código CSS:

.Triangulo {
width: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #08B;
}

Código HTML:

<div class="Triangulo"></div>

Resultado:

¿Cómo funciona la regla CSS anterior? Border-left y Border-right Indican las dimensiones del borde izquierdo y derecho respectivamente; el truco aquí está en colocar el color del borde transparente (transparent) para que no se muestre dicho borde dando así la forma de triángulo al div.

Si queremos que el triángulo apunte hacia abajo utilizaremos Border-top en vez de Border-bottom:

Código CSS:

.Triangulo_2 {
width: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid #08B;
}

Código HTML:

<div class="Triangulo_2"></div>

Resultado:

Podemos obtener diversas formas del triángulo cambiando los valores del Border-left y Border-right; si por ejemplo queremos obtener un triángulo rectángulo podríamos hacer lo siguiente:

Código CSS:

.Triangulo_rectangulo {
width: 0;
border-right: 100px solid transparent;
border-bottom: 100px solid #08B;
}

Código HTML:

<div class="Triangulo_rectangulo"></div>

Resultado:

Le hemos quitamos el borde izquierdo para así crear un triángulo rectángulo.

Círculo con CSS

Podemos crear círculos fácilmente con CSS usando la propiedad border-radius y asignándole un valor del 50%:

Codigo CSS:

.Circulo {
border-radius:50%;
width: 100px;
height: 100px;
background: #08B;
}

Código HTML:

<div class="Circulo"></div>

Resultado:

Ovalo con CSS

Como en el caso de los rectángulos; para crear un óvalo solo debemos de variar la anchura (width) o la altura (height); es decir el ancho debe ser distinto de la altura:

Código CSS:

.Ovalo {
border-radius:50%;
width: 200px;
height: 100px;
background: #08B;
}

Código HTML:

<div class="Ovalo"></div>

Resultado:

Trapecio con CSS

El trapecio es muy parecido a como creamos los triángulos, pero tiene como diferencia que aquí la anchura (width) es distinto de cero:

Código CSS:

.Trapecio {
width: 80px;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #08B;
}

Código HTML:

<div class="Trapecio"></div>

Resultado:

Conclusiones

Como vimos en este tutorial es realmente fácil crear formas geométricas evitando así el uso de imágenes; si queremos crear formas geométricas como estas o alguna otra debemos recordar que la consola JavaScript es una gran aliada para realizar esta labor y muchas otras más.