Formas geométricas con CSS: Como dibujar un círculo, un triángulo, y más usando solamente CSS

Con CSS y un poco de HTML (y, sobre todo, algo de curiosidad) se pueden crear cosas realmente interesantes sin necesidad de imágenes. Una de las más útiles y entretenidas es la creación de formas geométricas con CSS, una técnica que he usado muchas veces para evitar recursos gráficos rígidos y ganar flexibilidad en el diseño.

En mi caso, empecé creando figuras muy simples (cuadrados y círculos), pero conforme el proyecto lo exigía fui explorando bordes, pseudo-elementos, clip-path e incluso SVG. 

En esta guía te llevo por ese mismo camino: de lo más básico a técnicas modernas, explicando no solo el “cómo”, sino también el “cuándo conviene”.

Anteriormente, vimos como crear una simple nube con CSS.

Qué son las formas geométricas con CSS y cuándo usarlas

Las formas geométricas con CSS son figuras creadas únicamente con código: propiedades como width, height, border, border-radius, clip-path o pseudo-elementos como ::before y ::after.

Ventajas frente a imágenes tradicionales

Usar CSS en lugar de imágenes tiene ventajas claras:

• Se adaptan mejor a cambios de tamaño y responsive
• Reducen peticiones HTTP
• Son más fáciles de modificar
• Permiten animaciones sin librerías externas

En proyectos reales, he optado por CSS shapes especialmente para elementos decorativos, iconos simples o componentes reutilizables.

Limitaciones reales de CSS shapes

No todo es perfecto. Algunas técnicas:

• Son difíciles de mantener si el código no está bien explicado
• Pueden depender de “números mágicos” si no se usan variables
• No siempre son la mejor opción frente a SVG en formas muy complejas

Por eso es importante saber qué técnica elegir en cada caso.

Cuadrado con CSS

La base de casi todas las figuras. Un cuadrado no es más que un elemento con el mismo ancho y alto:

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).

Si cambiamos una de esas dimensiones, obtenemos un rectángulo. En la práctica, suelo definir estos valores con variables CSS para mantener el código escalable.

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.

Variantes de triángulos y figuras derivadas

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.

Triángulos invertidos y rectángulos

Cambiando qué borde tiene color y cuál es transparente, puedes orientar el triángulo hacia arriba, abajo o los lados. También puedes crear triángulos rectángulos eliminando uno de los bordes laterales.

En la práctica, este enfoque es rápido, pero poco flexible cuando el diseño crece.

Trapecios y paralelogramos

Un trapecio se obtiene combinando anchura (width) con bordes laterales transparentes. Es una extensión natural del triángulo y resulta útil para banners o separadores visuales.

Formas complejas con pseudo-elementos

Cuando una sola caja no es suficiente, entran en juego ::before y ::after.

Pentágono con ::before

El pentágono se construye combinando un bloque principal con una “punta” adicional. Este enfoque me resultó clave cuando necesitaba figuras no estándar sin recurrir a SVG.

Hexágono con ::before y ::after

Aquí se usan dos pseudo-elementos: uno para la parte superior y otro para la inferior. Visualmente es más fácil entenderlo si piensas la figura “por piezas”.

Octágono y ajustes de bordes

El octágono sigue la misma idea, pero ajustando anchuras para eliminar los picos. Este tipo de figuras funciona bien para badges o botones decorativos.

Formas modernas con clip-path y polygon()

Con el tiempo, clip-path se ha convertido en una de mis herramientas favoritas.

Cuándo usar clip-path en lugar de bordes

Uso clip-path cuando:

• Necesito imágenes o gradientes de fondo
• Quiero animar la forma
• Busco mayor flexibilidad

Ejemplo de triángulo moderno:

.triangle {
 width: 300px;
 height: 300px;
 background: linear-gradient(indigo, hotpink);
 clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

Triángulos y polígonos con fondos e imágenes

A diferencia de los bordes CSS, aquí sí puedes usar imágenes, GIFs o degradados. En uno de mis experimentos incluso combiné clip-path con SVG para crear un triángulo con fondo animado, algo imposible con el método clásico.

Círculo y óvalo usando border-radius

Podemos crear círculos fácilmente con CSS usando la propiedad border-radius y asignándole un valor del 50%:

Código 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:

• 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:

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 también 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");
	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.

Qué técnica elegir según el proyecto

Después de probar muchas opciones, suelo guiarme por esta regla práctica:

• Bordes CSS → flechas simples, triángulos rápidos
• Pseudo-elementos → formas medias sin imágenes
• clip-path → diseños modernos, fondos, animaciones
• SVG → máxima precisión o complejidad

No hay una única respuesta correcta: depende del contexto.

SVG y animaciones aplicadas a formas CSS

• clip-path con SVG
  • SVG permite definir rutas complejas con <path>. Al referenciarlas desde CSS, puedes aplicar recortes muy precisos. Esta técnica la uso cuando el diseño exige exactitud o animaciones complejas.
• Fondos animados y transformaciones
  • Combinando clip-path, transform y fondos animados se pueden lograr efectos muy visuales sin JavaScript pesado. Eso sí, conviene probar rendimiento en dispositivos modestos.

Preguntas frecuentes sobre formas geométricas con CSS

• ¿Se pueden crear formas solo con CSS?
  • Sí, desde figuras básicas hasta polígonos complejos.
• ¿Es mejor CSS o SVG?
  • Depende del caso. CSS es ideal para decoración; SVG para precisión extrema.
• ¿clip-path afecta al rendimiento?
  • En general no, pero conviene probar animaciones en dispositivos reales.
• ¿Puedo animar estas formas?
  • Sí, especialmente con transform, clip-path y gradientes.

Conclusiones y recomendaciones prácticas

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.

Crear formas geométricas con CSS es mucho más que un truco visual. Bien usadas, reducen dependencias, mejoran rendimiento y hacen el diseño más flexible.

Mi recomendación es empezar por lo básico, entender cómo funcionan los bordes y los pseudo-elementos, y luego dar el salto a clip-path y SVG cuando el proyecto lo pida. CSS ha evolucionado mucho, y hoy ofrece herramientas limpias y potentes para este tipo de tareas.

El siguiente paso, aprende a usar y crear flechas con CSS y HTML.