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

Colourlovers: Paletas de colores lista para el diseño web

Colourlovers: Paletas de colores lista para el diseño web

Burbujas flotantes con JavaScript

Burbujas flotantes con JavaScript

Creando un pulso con CSS

Creando un pulso con CSS

Algunos artículos que te pueden interesar

Entendiendo la propiedad perspective (perspectiva) en CSS

Entendiendo la propiedad perspective (perspectiva) en CSS

La propiedad perspective agrega un efecto tridimensional afectando la distancia que hay entre un observador y las figuras en el plano a través de una variación en el eje Z; en otras palabras, permite acercar/alejar figuras en el plano.

Andrés Cruz 05-02-2015

Múltiples capas: Efecto de apertura de una puerta con CSS

Múltiples capas: Efecto de apertura de una puerta con CSS

En esta entrada veremos un experimento compuestos por múltiples divs solapados (capas) y emplearemos las transformaciones 3D en CSS en conjunto con el selector hover podremos crear una transición que emula el efecto de apertura de una puerta.

Andrés Cruz 13-08-2015

Botones con fondo corredizo en CSS

Botones con fondo corredizo en CSS

En esta entrada veremos como crear unos fantásticos botones con fondo corredizo.

Andrés Cruz 21-04-2015