Creando Figuras Geométricas con CSS

En mi opinión, una de las novedades interesantes de CSS3 es la posibilidad de usar menos imágenes en el diseño web y crear diferentes formas.

Todas esas figuras que antes dibujabas en editores gráficos ahora se pueden hacer con CSS3. Las nuevas propiedades CSS de transformación y radio de borde permiten hacerlo sin recurrir a programas externos.

En este tutorial, crearemos figuras geométricas usando solo propiedades CSS3.

Lo que necesitas para usar esta guía:

Conocimiento de CSS3;
Tiempo y atención.

Círculo

HTML

Para crear un círculo con CSS, primero usaremos la etiqueta div. Le daremos un ID con el nombre de la figura. Así, en el primer ejemplo, el ID será Circle:

<div id="circle"></div>

CSS

En cuanto al CSS, simplemente establecemos los valores de width y height, y luego establecemos el valor de border-radius igual a la mitad de width y height:

#circle {
    width: 120px;
    height: 120px;
    background: #7fee1d;
    -moz-border-radius: 60px;
    -webkit-border-radius: 60px;
    border-radius: 60px;
}

Cuadrado

HTML

Para crear un cuadrado en CSS, al igual que en el ejemplo del círculo, creamos un div con el identificador square. Este es el código para el bloque div:

<div id="square"></div>

CSS

Para crear un cuadrado en CSS, simplemente establecemos los valores de width y height iguales entre sí:

#square {
    width: 120px;
    height: 120px;
    background: #f447ff;
}

Rectángulo

HTML

Para crear una forma rectangular en CSS, al igual que con el cuadrado, configuramos un div donde el ID es rectangle:

<div id="rectangle"></div>

CSS

Al igual que con el cuadrado, estableceremos los valores de width y height, pero esta vez width será mayor que height:

#rectangle {
    width: 220px;
    height: 120px;
    background: #4da1f7;
}

Óvalo

HTML

Para crear un óvalo en CSS, creamos un div con el ID oval:

<div id="oval"></div>

CSS

El óvalo es similar a un círculo; es una forma rectangular con un radio establecido igual a la mitad del valor de height:

#oval {
    width: 200px;
    height: 100px;
    background: #e9337c;
    -webkit-border-radius: 100px / 50px;
    -moz-border-radius: 100px / 50px;
    border-radius: 100px / 50px;
}

Triángulo

HTML

De nuevo, para crear un triángulo con CSS, hacemos un div con el ID triangle.

<div id="triangle"></div>

CSS

Para crear un triángulo, manipularems la propiedad border. Al cambiar el ancho del borde, obtendrás diferentes ángulos de giro:

#triangle {
    width: 0;
    height: 0;
    border-bottom: 140px solid #fcf921;
    border-left: 70px solid transparent;
    border-right: 70px solid transparent;
}

Triángulo apuntando hacia abajo

Triángulo azul turquesa apuntando hacia abajo. — Triángulo invertido creado con HTML y CSS.

HTML

Creamos un triángulo invertido con CSS. De nuevo, creamos un div. El ID es triangle_down:

<div id="triangle_down"></div>

CSS

Al crear un triángulo invertido, operamos con el grosor del borde:

#triangle_down {
    width: 0;
    height: 0;
    border-top: 140px solid #20a3bf;
    border-left: 70px solid transparent;
    border-right: 70px solid transparent;
}

Triángulo apuntando hacia la izquierda

Triángulo verde apuntando hacia la izquierda. — Triángulo izquierdo creado con HTML y CSS.

HTML

Para crear una figura triangular que mire hacia la izquierda, de nuevo creamos un div con el ID triangle_left:

<div id="triangle_left"></div>

CSS

Al crear un triángulo que apunta hacia la izquierda, operamos con las propiedades de los bordes del lado derecho del triángulo:

#triangle_left {
    width: 0;
    height: 0;
    border-top: 70px solid transparent;
    border-right: 140px solid #6bbf20;
    border-bottom: 70px solid transparent;
}

Triángulo apuntando hacia la derecha

Triángulo naranja apuntando hacia la derecha. — Triángulo derecho creado con HTML y CSS.

HTML

Para crear una figura triangular que mire hacia la derecha, creamos un div con el ID triangle_right:

<div id="triangle_right"></div>

CSS

Al crear un triángulo que apunta hacia la derecha, operamos con las propiedades de los bordes del lado derecho del triángulo:

#triangle_right {
    width: 0;
    height: 0;
    border-top: 70px solid transparent;
    border-left: 140px solid #ff5a00;
    border-bottom: 70px solid transparent;
}

Rombo

HTML

Para crear una figura de «rombo», creamos un div con el ID diamond:

<div id="diamond"></div>

CSS

Un rombo se puede crear de varias maneras. Usando la propiedad transform junto con los valores de la propiedad rotate, podemos mostrar dos triángulos ubicados uno al lado del otro:

#diamond {
    width: 120px;
    height: 120px;
    background: #1eff00;
    /* Rotate */
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    /* Rotate Origin */
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
    margin: 60px 0 10px 310px;
}

Trapecio

HTML

Para crear una figura de «trapecio», creamos un div con el ID trapezium.

<div id="trapezium"></div>

CSS

Un trapecio se puede crear estableciendo valores iguales para el borde izquierdo y derecho con un borde inferior plano:

#trapezium {
    height: 0;
    width: 120px;
    border-bottom: 120px solid #ec3504;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
}

Paralelogramo

HTML

Para crear una figura de «paralelogramo», creamos un div con el ID parallelogram:

<div id="parallelogram"></div>

CSS

Para crear un paralelogramo, establecemos el valor transform igual a skew para rotar el elemento en un ángulo de 30 grados:

#parallelogram {
  width: 160px;
  height: 100px;
  background: #8734f7;
  clip-path: polygon(0 0, 75% 0, 100% 100%, 25% 100%);
}

o, también:

#parallelogram {
    width: 160px;
    height: 100px;
    background: #8734f7;
    -webkit-transform: skew(30deg);
    -moz-transform: skew(30deg);
    -o-transform: skew(30deg);
    transform: skew(30deg);
}

Estrella

HTML

Para crear una figura de «estrella», creamos un div con el ID star:

<div id="star"></div>

CSS

Crear una figura de «estrella» es una secuencia de extrañas manipulaciones de bordes usando la propiedad transform igual a rotate. Mira el código a continuación:

#star {
    width: 0;
    height: 0;
    margin: 50px 0;
    color: #fc2e5a;
    position: relative;
    display: block;
    border-right: 100px solid transparent;
    border-bottom: 70px solid #fc2e5a;
    border-left: 100px solid transparent;
    -moz-transform: rotate(35deg);
    -webkit-transform: rotate(35deg);
    -ms-transform: rotate(35deg);
    -o-transform: rotate(35deg);
    transform: rotate(35deg);
}

#star:before {
    height: 0;
    width: 0;
    position: absolute;
    display: block;
    top: -45px;
    left: -65px;
    border-bottom: 80px solid #fc2e5a;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    content: '';
    -webkit-transform: rotate(-35deg);
    -moz-transform: rotate(-35deg);
    -ms-transform: rotate(-35deg);
    -o-transform: rotate(-35deg);
}

#star:after {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    display: block;
    top: 3px;
    left: -105px;
    color: #fc2e5a;
    border-right: 100px solid transparent;
    border-bottom: 70px solid #fc2e5a;
    border-left: 100px solid transparent;
    -webkit-transform: rotate(-70deg);
    -moz-transform: rotate(-70deg);
    -ms-transform: rotate(-70deg);
    -o-transform: rotate(-70deg);
}

Estrella de seis puntas

Estrella morada de seis puntas. — Estrella de David creada con HTML y CSS.

HTML

Para crear una figura de «estrella de seis puntas», creamos un div con el ID star_six_points:

<div id="star_six_points"></div>

CSS

La estrella de seis puntas se crea usando la propiedad border. Creamos dos conjuntos de figuras y las combinamos en una:

#star_six_points {
    width: 0;
    height: 0;
    display: block;
    position: absolute;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid #de34f7;
    margin: 10px auto;
}

#star_six_points:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid #de34f7;
    margin: 30px 0 0 -50px;
}

Pentágono

HTML

Para crear una figura de «pentágono», creamos un div con el ID pentagon:

<div id="pentagon"></div>

CSS

La creación de un pentágono consiste en crear dos elementos que luego se unen en uno. El primer elemento es una forma trapezoidal. Luego, en la parte superior, agregamos una forma triangular:

#pentagon {
    width: 54px;
    position: relative;
    border-width: 50px 18px 0;
    border-style: solid;
    border-color: #277bab transparent;
}

#pentagon:before {
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    top: -85px;
    left: -18px;
    border-width: 0 45px 35px;
    border-style: solid;
    border-color: transparent transparent #277bab;
}

Hexágono

HTML

Para crear una figura de «hexágono», creamos un div con el ID hexagon:

<div id="hexagon"></div>

CSS

Hay varias maneras de crear un hexágono. Una de ellas es completamente idéntica a la creación de un pentágono. Creamos una forma rectangular y en la parte superior agregamos dos triángulos:

#hexagon {
    width: 100px;
    height: 55px;
    background: #fc5e5e;
    position: relative;
    margin: 10px auto;
}

#hexagon:before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: -25px;
    left: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 25px solid #fc5e5e;
}

#hexagon:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    bottom: -25px;
    left: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 25px solid #fc5e5e;
}

Octógono

HTML

Para crear una figura de «octógono», creamos un div con el ID octagon:

<div id="octagon"></div>

CSS

El octógono también es una figura interesante. Primero, creamos dos formas trapezoidales y a los lados colocamos dos triángulos. Hay algunas maneras más, pero esta es la más efectiva:

#octagon {
    width: 100px;
    height: 100px;
    background: #ac60ec;
    position: relative;
}

#octagon:before {
    content: "";
    width: 42px;
    height: 0;
    position: absolute;
    top: 0;
    left: 0;
    border-bottom: 29px solid #ac60ec;
    border-left: 29px solid #f4f4f4;
    border-right: 29px solid #f4f4f4;
}

#octagon:after {
    content: "";
    width: 42px;
    height: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 29px solid #ac60ec;
    border-left: 29px solid #f4f4f4;
    border-right: 29px solid #f4f4f4;
}

Corazón

HTML

Para crear una figura de «corazón», creamos un div con el ID heart:

<div id="heart"></div>

CSS

Esta figura es bastante compleja de crear, pero se puede hacer rotando elementos con diferentes ángulos y cambiando el valor de la propiedad transform-origin para cambiar la posición de los elementos rotados:

#heart {
    position: relative;
}

#heart:before, #heart:after {
    content: "";
    width: 70px;
    height: 115px;
    position: absolute;
    background: red;
    left: 70px;
    top: 0;
    -webkit-border-radius: 50px 50px 0 0;
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 50px 50px 0 0;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
}

#heart:after {
    left: 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    -o-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
}

Huevo

HTML

Para crear una figura de «huevo», creamos un div con el ID egg:

<div id="egg"></div>

CSS

El concepto de la figura «huevo» es similar al concepto de la figura «óvalo», excepto por la propiedad height, que es mayor que width. Y se presta especial atención a la propiedad radius. Con la selección de sus valores, puedes lograr el resultado deseado:

#egg {
    width: 136px;
    height: 190px;
    background: #ffc000;
    display: block;
    -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

Infinito

HTML

Para crear una figura de «infinito», creamos un div con el ID infinity:

<div id="infinity"></div>

CSS

La figura «infinito» se puede crear mediante una manipulación cuidadosa de la propiedad border y el establecimiento de los ángulos de la circunferencia:

#infinity {
    width: 220px;
    height: 100px;
    position: relative;
}

#infinity:before, #infinity:after {
    content: "";
    width: 60px;
    height: 60px;
    position: absolute;
    top: 0;
    left: 0;
    border: 20px solid #06c999;
    -moz-border-radius: 50px 50px 0;
    border-radius: 50px 50px 0 50px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

#infinity:after {
    left: auto;
    right: 0;
    -moz-border-radius: 50px 50px 50px 0;
    border-radius: 50px 50px 50px 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

Burbuja de comentario

HTML

Para crear una figura de «burbuja», creamos un div con el ID comment_bubble:

<div id="comment_bubble"></div>

CSS

Esta figura se puede crear creando un triángulo y estableciendo la propiedad border-radius, y luego uniendo un rectángulo a su lado izquierdo:

#comment_bubble {
    width: 140px;
    height: 100px;
    background: #088cb7;
    position: relative;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    border-radius: 12px;
}

#comment_bubble:before {
    content: "";
    width: 0;
    height: 0;
    right: 100%;
    top: 38px;
    position: absolute;
    border-top: 13px solid transparent;
    border-right: 26px solid #088cb7;
    border-bottom: 13px solid transparent;
}

Pac-Man

HTML

Para crear una figura de «Pac-Man», creamos un div con el ID pacman:

<div id="pacman"></div>

CSS

Crear Pac-Man es todo un truco. Manipula las propiedades border y radius para crear un círculo con el lado izquierdo abierto:

#pacman {
    width: 0;
    height: 0;
    border-right: 70px solid transparent;
    border-top: 70px solid #ffde00;
    border-left: 70px solid #ffde00;
    border-bottom: 70px solid #ffde00;
    border-top-left-radius: 70px;
    border-top-right-radius: 70px;
    border-bottom-left-radius: 70px;
    border-bottom-right-radius: 70px;
}

Conclusión

Hay muchas posibilidades para crear figuras con CSS3. Puedes usar las figuras como parte de tu diseño, además tienen un «parche» aceptable en caso de navegadores de la era jurásica, como Internet Explorer.

Espero que te haya gustado esta guía. En la sección de comentarios puedes aportar tus propias formas de crear figuras a partir de la guía.

Categorizado en:

CSS,

Creando Figuras Geométricas con CSS

Círculo

Cuadrado

Rectángulo

Óvalo

Triángulo

Triángulo apuntando hacia abajo

Triángulo apuntando hacia la izquierda

Triángulo apuntando hacia la derecha

Rombo

Trapecio

Paralelogramo

Estrella

Estrella de seis puntas

Pentágono

Hexágono

Octógono

Corazón

Huevo

Infinito

Burbuja de comentario

Pac-Man

Texto Truncado de Varias Líneas con un Botón «Mostrar más» solo con CSS

Solución de Problemas Relacionados con el Error «403 Forbidden» de NGINX

Deja una respuesta Cancelar la respuesta

Únete a nuestra comunidad 👋

Presiona ESC para cerrar

Círculo

Cuadrado

Rectángulo

Óvalo

Triángulo

Triángulo apuntando hacia abajo

Triángulo apuntando hacia la izquierda

Triángulo apuntando hacia la derecha

Rombo

Trapecio

Paralelogramo

Estrella

Estrella de seis puntas

Pentágono

Hexágono

Octógono

Corazón

Huevo

Infinito

Burbuja de comentario

Pac-Man

Texto Truncado de Varias Líneas con un Botón «Mostrar más» solo con CSS

Solución de Problemas Relacionados con el Error «403 Forbidden» de NGINX

Más en esta CategoríaCSS

Texto Truncado de Varias Líneas con un Botón «Mostrar más» solo con CSS

10 Errores Comunes de CSS que los Desarrolladores Cometen A Menudo

Cómo Usar Variables CSS y Optimizar el Proceso de Diseño de Estilos

Imágenes Responsivas: 5 Trucos CSS para Ahorrar Tiempo

Deja una respuesta Cancelar la respuesta

Únete a nuestra comunidad 👋