Formas básicas

Maneras de definir formas geométricas básicas


En nuestro código CSS, es posible utilizar ciertas funciones para determinar formas geométricas básicas, como pueden ser círculos, rectángulos o polígonos, entre otros. Estas formas se pueden utilizar para diversos objetivos, como recortes mediante la propiedad clip-path, o colocaciones mediante la propiedad outside-shape, entre otros.

Tipos de formas CSS

Por lo tanto, siempre que hagamos referencia a una forma nos referimos a alguna de las funciones siguientes:

Valores Descripción
inset( ) Crea una forma rectangular "hacia dentro".
inset( ) Idem a la anterior, pero con bordes redondeados tamaño radius.
circle( at ) Crea una forma circular con un tamaño size con centro en x, y.
ellipse( at ) Idem a la anterior, pero diferenciando el tamaño de ancho sx del de alto sy.
polygon( , , ...) Crea una forma polígonal siguiendo las coordenadas indicadas.
path( ) Crea una forma basada en un trayecto SVG.

Ten en cuenta que aunque es posible utilizar otras unidades para definir las formas, lo más habitual suele ser utilizar porcentajes, ya que resulta muchísimo más sencillo y claro, siendo también mucho más escalable y mantenible si el elemento cambia sus dimensiones.

Veamos como funcionan cada una de estas funciones de formas básicas. Los ejemplos de código los haremos utilizando la propiedad de recortes clip-path, que veremos en el siguiente artículo.

La función inset()

En el caso de la función inset(), estamos estableciendo un cuadrado o rectángulo, donde cada parámetro (top, right, bottom, left) indicará un porcentaje que representa la distancia desde su punto concreto.

.box {
  border: 4px solid black;
  background: hotpink;
  width: 200px;
  height: 200px;
  clip-path: inset(0 0 50% 50%);
}
<div class="box"></div>

Así pues, inset(0% 0% 50% 50%) parte desde el 0% de la parte superior, desde el 0% de la parte derecha, desde la mitad (50%) de la parte inferior y desde la mitad (50%) de la parte izquierda:

Forma básica (shape) con la función inset

También es posible redondear los bordes del cuadrado o rectángulo, indicando al final la palabra clave round junto al radio de borde que quieres especificar. Por ejemplo:

.box {
  background: hotpink;
  width: 200px;
  height: 200px;
  clip-path: inset(50px round 20px);
}
<div class="box"></div>

Observa que en este caso, hemos establecido sólo un valor para los parámetros, es decir, equivalente a inset(50px 50px 50px 50px), pero además incluimos round 20px, por lo que va a establecer un border-radius de 20px en cada esquina, es decir, algo similar a border-radius: 20px 20px 20px 20px.

La función circle()

En el caso de la función circle(), vamos a establecer una forma circular en una porción del elemento, pudiendo recortar formas como círculos, medias lunas, etc. Veamos un ejemplo con un fragmento de código:

.box {
  background: hotpink;
  width: 200px;
  height: 200px;
  clip-path: circle(50% at 50% 0);
}
<div class="box"></div>

Así pues, en este caso, observa que indicamos circle(50% at 50% 0). El primer parámetro indica el tamaño de la forma geométrica circular (50%), y las coordenadas después de at es el punto central del círculo: 50% en x y 0% en y. Quedaría algo así:

Forma básica (shape) con la función circle

Además de la forma circular básica, podemos crear formas elípticas, como veremos a continuación.

La función ellipse()

El caso de la función ellipse() es exactamente igual que el de circle() sólo que en las formas elípticas podemos establecer un ancho y alto diferente, mientras que en las formas circulares sólo podemos establecer un tamaño de ancho y alto idéntico:

.box {
  background: hotpink;
  width: 200px;
  height: 200px;
  clip-path: ellipse(50% 25% at 50% 0);
}
<div class="box"></div>

Como ya hemos comentado, la diferencia respecto a ellipse() es que en el tamaño de la elipse le podemos indicar el tamaño de ancho y de alto, mientras que en el círculo este valor es el mismo en ambos y sólo se indica uno.

La función polygon()

Probablemente, el tipo de forma básica más potente y versátil sea crear una forma poligonal utilizando polygon(). Su funcionamiento es muy sencillo, pero a la vez muy flexible. Simplemente hay que indicar los puntos clave deseados e iremos creando la forma poco a poco:

.box {
  background: hotpink;
  width: 200px;
  height: 200px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
<div class="box"></div>

En este ejemplo, polygon() tiene 3 puntos clave separados por comas (cada uno con sus coordenadas en X e Y), formando un triángulo, pero se pueden indicar tantos puntos de corte como se quiera (incluso con valores negativos o superiores a 100%):

Forma básica (shape) con la función polygon

Recuerda que es posible crear polígonos mucho más complejos, con más puntos clave (o puntos de corte), consiguiendo polígonos con 3 puntos (triángulos), con 4 puntos (cuadrados o rectángulos), con 5 puntos (pentágonos), etc. La ventaja de las formas poligonales es que son mucho más personalizables.

Un buen consejo podría ser guardar la forma poligonal creada con la función polygon() en una variable CSS para reutilizarla después o añadirle un nombre de variable y hacerla más semántica.

La función path()

Si buscamos algo un poco más de flexiblilidad y potencia, podemos crear un trayecto personalizado mediante la función path(). Con ella podemos definir un trayecto SVG para crear una forma que puede ser mucho más complejas, imposibles (o muy difíciles) de conseguir utilizando sólo HTML/CSS.

En los parámetros de path() se pasa un que es una serie de coordenadas de un trayecto SVG, o lo que es lo mismo, el atributo d (data) de un elemento <path> de SVG:

.box {
  width: 256px;
  height: 256px;
  background: url("manzdev.png") center / cover;
  clip-path:
    path("m4,87l93,0l29,-84l29,84l93,0l-76,52l29,84l-76,-52l-76,52l29,-84l-76,-52z");
}
<div class="box"></div>

En este caso, hemos definido una estrella a través de una serie de coordenadas de un trayecto SVG.

¿Quién soy yo?

Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.

Puedes encontrar más sobre mi en Manz.dev