Formas geométricas con CSS (parte 2)
- Andrés Cruz
Hace ya un buen tiempo, hablamos como crear algunas figuras geométricas empleando CSS: Formas geométricas con CSS (parte 1) para ese entonces explicamos como crear las siguientes figuras:
- Cuadrado
- Rectángulo
- Triángulo
- Círculo
- Ovalo
- Trapecio
En esta nueva entrada 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:
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter