Formas geométricas con CSS
- 👤 Andrés Cruz
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:
Ahora Veremos cómo crear algunas figuras geométricas más:
En general para crear cualquier figura que veremos a continuación basta con "jugar" con los bordes de la misma en conjunto con los selectores :before y :after; de tal forma lo que se hace es de "estirar" el contenedor para adaptarlo a lo que se necesite; veamos esto en la práctica.
Creando un pentágono con CSS
La primera figura que trataremos es el pentágono; el cual está compuesto del siguiente código CSS:
#pentagon {
position: relative;
width: 54px;
border-width: 50px 23px 0;
border-style: solid;
border-color: red transparent;
}
#pentagon:before {
content: "";
position: absolute;
height: 0;
width: 0;
top: -90px;
left: -24px;
border-width: 0 50px 40px;
border-style: solid;
border-color: transparent transparent red;
}
El truco aquí es establecer borde para el arriba (), derecha (), izquierda (), y abajo () con la propiedad border-width y con el resto del CSS cuya explicación no hace falta realizar:
#pentagon {
position: relative;
width: 54px;
border-width: 50px 23px 0;
border-style: solid;
border-color: red transparent;
}
Obtenemos la siguiente figura:
Lo cual obviamente no es un pentágono al faltarle una de sus puntas; para crear esta punta haremos uso del selector :before:
#pentagon:before {
content: "";
position: absolute;
height: 0;
width: 0;
top: -90px;
left: -24px;
border-width: 0 50px 40px;
border-style: solid;
border-color: transparent transparent red;
}
Como podrás notar; con el selector :before y la propiedad border-width lo que se busca es crear una punta que luzca de la siguiente forma:
Y alinear esta punta encima del contenedor anterior; con el top y el left ubicamos la punta en donde queramos, pero para efectos de este experimento nos interesa ubicarlo encima del contenedor quedando de la siguiente manera:
Creando un hexágono con CSS
El hexágono es un caso caso parecido al pentágono pero esta vez se emplean los selectores :before y :after en lugar de sólo :before; picando el hexágono en tres pedazos puedes ver más fácilmente como esta formado:
Para la punta superior:
#hexagon {
width: 100px;
height: 55px;
background: red;
position: relative;
}
Para el cuerpo:
#hexagon:before {
content: "";
position: absolute;
top: -25px;
left: 0;
width: 0;
height: 0;
border-width: 0 50px 25px;
border-style: solid;
border-color: transparent transparent red;
}
Para la punta inferior:
#hexagon:after {
content: "";
position: absolute;
bottom: -25px;
left: 0;
width: 0;
height: 0;
border-width: 25px 50px 0;
border-style: solid;
border-color: red transparent transparent;
}
Se obtiene la siguiente figura:
Creando un octágono con CSS
Finalmente veamos cómo crear un octágono cuyo diseño CSS es muy parecido a su antecesor (el hexágono) salvo que la parte superior es cuadrada (no tiene un pico) y esto se logra definiendo un ancho en los selectores :before y :after.
Para el cuerpo:
#octagono {
width: 100px;
height: 100px;
background: red;
position: relative;
}
Para la punta superior:
#octagono:before {
content: "";
position: absolute;
top: 0;
left: 0;
border-width: 0 29px 29px;
border-style: solid;
border-color: #FFF #FFF red;
width: 42px;
height: 0;
}
Para la punto inferior:
#octagono:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
border-width: 29px 29px 0;
border-style: solid;
border-color: red #FFF #FFF;
width: 42px;
height: 0;
}
Obtenemos la siguiente figura:
Triángulo con fondo animado con CSS
En esta entrada veremos cómo crear un triángulo con un fondo animado, en realidad es bastante obvio y sencillo el experimento y queda bastante bien el efecto a obtener; en general solo necesitamos un poco de CSS, HTML vectorial y una imagen.
Primero dibujaremos un triángulo vectorizado con HTML con las etiquetas path svg:
<svg width='0' height='0'>
<defs>
<clipPath id="cp" clipPathUnits="objectBoundingBox">
<path d="M0.500, 0.945 L0.994, 0.090 L0.006, 0.090 L0.500, 0.945 L0.500, 0.650 L0.262, 0.238 L0.738, 0.237 L0.500, 0.650z"></path>
</clipPath>
</defs>
</svg>
Antes hablamos sobre la propiedad clip-pathLa propiedad clip-path en CSS para seleccionar regiones a mostrar en elementos y presentamos los diversos valores que se le pueden establecer; círculos, elipses, cuadrados, polígonos etc; con la propiedad clip-path desde el CSS; definir los path desde el HTML tambien es posible y para eso se emplea la etiqueta <path> con nodos los cuales construyen la figura que queramos (más información en: clip-pathPaths).
Ahora indicamos la etiqueta en donde renderizamos el path anterior:
<div class="triangle"></div>
Y con el siguiente CSS queda completado el experimento:
.triangle {
clip-path: url(#cp);
width: 300px;
height: 300px;
background-size: cover;
background-blend-mode: screen;
position: absolute;
top: 50%;
left: 50%;
background-color: #333;
background-image: url("fondo.gif");
-webkit-transform: translateX(-65%) translateY(-50%) rotate(60deg);
transform: translateX(-65%) translateY(-50%) rotate(60deg);
}
Con la propiedad clip-path referenciamos el identificador de la etiqueta que contiene clip-path, es decir, el triangulo.
Con este último CSS rotamos el triángulo y lo giramos en una posición fija e incluimos el fondo, que como puedes darte cuenta es un gif, lo que quiere decir que es un fondo animado.
El resto del código lo puedes encontrar para su descarga y visualización al inicio y final de esta entrada.
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.
Acepto recibir anuncios de interes sobre este Blog.
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 también, veremos como crear un triángulo con un fondo animado con un poco de CSS, HTML vectorial y una imagen.
| 👤 Andrés Cruz