DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
13-10-2013

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

El 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

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

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

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

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

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.


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Gradientes sobre el texto

Gradientes sobre el texto

6 Loaders con CSS

6 Loaders con CSS

Corazón con CSS

Corazón con CSS

Algunos artículos que te pueden interesar

Elementos reversibles con estilo 3D en CSS

Elementos reversibles con estilo 3D en CSS

En esta entrada veremos como hacer que un elemento sea reversible empleando las animaciones y transiciones en CSS.

Andrés Cruz 30-03-2015

¿Cómo cubrir todo el fondo con una imagen con CSS?

¿Cómo cubrir todo el fondo con una imagen con CSS?

En esta entrada veremos una técnica que permite que una imagen de fondo cubra todo el ancho del navegador web.

Andrés Cruz 16-09-2014

La pseudo-class :empty en CSS

La pseudo-class :empty en CSS

En esta entrada veremos como funciona y cómo usar la poco usada y conocida pseudo-class :empty.

Andrés Cruz 15-12-2014