Formas geométricas con CSS (parte 2)

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

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:

• Pentágono.
• Hexágono.
• Octágono.

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: