CSS permite cambiar la apariencia de los elementos HTML mediante una serie de funciones para crear todo tipo de figuras geométricas. Así, se puede hacer que un elemento cualquiera tenga la forma de un círculo, una elipse, un rectángulo o un polígono. También se puede crear figuras más complejas a partir de una imagen o un degradado CSS que tengan transparencia (canal alfa).
Las figuras geométricas se pueden utilizar para modelar elementos, cambiando sus límites. Por ejemplo, se puede crear un recorte visual con la propiedad clip-path, y se puede modificar la caja de los elementos con shape-outside, que por defecto es rectangular, para ajustar el texto a la forma deseada.
Lista de funciones para generar figuras geométricas:
| Función | Descripción |
|---|---|
inset() | Define un rectángulo interior. |
circle() | Define una figura circular. |
ellipse() | Define una figura elíptica. |
polygon() | Define una figura poligonal. |
path() | Define una figura a partir de un trayecto SVG. |
rect() | Define un rectángulo con distancias desde los bordes. |
xywh() | Define un rectángulo con desplazamiento y tamaño. |
En los ejemplos de estas funciones usaremos la propiedad CSS clip-path para mostrar el recorte visual de cada tipo de figura geométrica.
La función ‘inset()’
La función inset() permite definir un rectángulo que decrece hacia el interior de la caja del elemento. Este decrecimiento se aplica a partir de los cuatro bordes que definen la caja exterior. También se puede redondear las esquinas.
Esta función puede tomar de uno a cuatro parámetros que permiten indicar el decrecimiento interior a partir de los bordes superior, derecho, inferior e izquierdo, siguiendo el orden y la sintaxis que se aplica para los márgenes. Los parámetros son valores numéricos en unidades de longitud, relativas o absolutas, que definen las posiciones de los bordes del rectángulo insertado.
Además, se puede añadir de forma opcional el radio para redondear las esquinas. En este caso, como quinto parámetro se usa la palabra clave round, y a continuación se introducen los valores de las esquinas redondeadas, usando en este caso la sintaxis abreviada de los bordes curvos.
Vamos a crear un ejemplo en el que hacemos un desplazamiento interior del 50% desde abajo y desde la derecha; solo se verá el cuadrante superior zurdo. También aplicamos un radio de 15 píxeles a la esquina inferior derecha.
Código CSS:
.contenedor {
background: teal;
border: 3px solid #ff7f2a;
box-sizing: border-box;
display: inline-block;
height: 50px;
width: 100px;
}
.interior {
clip-path: inset(0% 50% 50% 0% round 0 0 15px 0);
}
Resultado:
En el elemento de la izquierda no se ha aplicado ninguna modificación geométrica. En el elemento de la derecha, el rectángulo decrece desde los límites exteriores hacia dentro según las longitudes indicadas.
La función ‘circle()’
La función circle() permite definir una figura circular sobre un elemento. Se trata de una función muy potente, ya que no solamente permite indicar el tamaño del círculo, si no que también permite definir su posición. Gracias a eso puede crearse formas de medio círculo, un cuarto de círculo, etc.
El principal parámetro de esta función es el radio del círculo, que puede expresarse como valor numérico en unidades de longitud, ya sean relativas o absolutas. De forma opcional, puede indicarse el punto de origen del círculo: primero se indica la palabra clave at, y después se indican las coordenadas X e Y.
De forma alternativa al radio, es posible utilizar la palabra clave closest-side, que aplicará la distancia que queda desde el centro del círculo hasta el borde más cercano. Con la palabra clave farthest-side se aplicará la distancia que queda desde el centro del círculo hasta el borde más alejado.
En el siguiente ejemplo vamos a crear una forma circular con un radio de 25 píxeles, teniendo el centro a la izquierda del todo y centrado verticalmente.
Código CSS:
.circulo {
clip-path: circle(25px at 0 50%);
}
Resultado:
Tal y como se puede observar, el elemento de la derecha tiene forma de medio círculo, ya que el centro del círculo se encuentra en el borde izquierdo.
La función ‘ellipse()’
La función ellipse() permite definir una figura elíptica sobre un elemento. Es una función muy similar a circle() pero con la diferencia que permite establecer dos radios, uno para la altura y otro para la anchura.
Hay dos parámetros obligatorios expresados en unidades de longitud. El primero es el radio del ancho de la elipse, y el segundo es el radio del alto. En este caso, también es opcional indicar el punto de origen de la elipse: se usa la palabra clave at, y a continuación se especifica las coordenadas X e Y.
Para cada uno de los dos radios que definen la elipse también se puede utilizar las palabras clave closest-side o farthest-side. De esta forma se puede utilizar automáticamente las distancias que hay desde el centro de la elipse hasta los bordes más cercano y más lejano, respectivamente.
Para visualizar lo comentado, creamos una elipse con radio de ancho de 50 píxeles y un radio de alto de 20 píxeles. Ubicamos el centro de la figura elíptica a 70 píxeles de la izquierda y la centramos verticalmente.
Código CSS:
.elipse {
clip-path: ellipse(50px 20px at 70px 50%);
}
Resultado:
El elemento de la derecha tiene aplicada una función para dar forma de elipse, con el centro ligeramente desplazado a la derecha.
La función ‘polygon()’
La función polygon() permite definir una figura poligonal sobre un elemento. Se trata de una función muy potente y versátil, ya que puede crear figuras geométricas poligonales de todo tipo, sean regulares o irregulares. Con esta función podríamos crear un triángulo, un hexágono, una flecha, una estrella…
Como parámetro admite una lista infinita de parejas de valores separadas por una coma. Cada pareja de valores representa un punto del polígono; por tanto, los valores son las coordenadas X e Y de cada punto. Las coordenadas serán valores numéricos en unidades de longitud, relativas o absolutas.
Por ejemplo, para crear un triángulo definiremos 3 parejas de valores. En una figura geométrica de 20 vértices tendremos 20 parejas de valores. A pesar de tener un uso simple, el código resultante puede resultar muy largo y difícil de leer.
En el siguiente ejemplo creamos una figura geométrica de forma rectangular, por lo que vamos a indicar diez parejas de vértices.
Código CSS:
.poligono {
clip-path: polygon(
0% 0%,
0% 100%,
25% 100%,
25% 25%,
75% 25%,
75% 75%,
25% 75%,
25% 100%,
100% 100%,
100% 0%);
}
Resultado:
En este ejemplo, el elemento de la izquierda se ve completo porque no tiene ningún recorte visual, pero en el de la derecha se aplica una figura geométrica rectangular con un agujero en el centro.
La función ‘path()’
La función path() permite crear figuras geométricas a partir de un trayecto SVG personalizado. Esta función todavía es más potente, ya que facilita la creación de figuras mucho más complejas. Algunas figuras pueden requerir muchos puntos, y hacerlas con polígonos llevaría demasiadas horas de trabajo.
Esta función admite como parámetro una cadena de texto que contiene el trayecto SVG de la figura geométrica que queramos utilizar.
Vamos a crear una figura geométrica que no se podría crear con un círculo ni con una elipse, y que requeriría muchos puntos si se usara un polígono.
Código CSS:
.camino {
clip-path: path("M 5 15 Q 95 75 90 15");
}
Resultado:
El elemento de la derecha era inicialmente como el de la izquierda, pero tras aplicar el recorte visual ha quedado con la forma que se observa.
La función ‘rect()’
La función rect() permite crear un rectángulo dentro de la caja del elemento. La diferencia de esta función con inset() es que en esta ocasión no se toma como punto de referencia cada uno de los bordes de la caja, sino que se utiliza siempre la esquina superior izquierda para definir las coordenadas.
Esta función tiene cuatro parámetros obligatorios. Se trata de valores numéricos en unidades de longitud, relativas o absolutas, correspondientes a las coordenadas del primer punto desde arriba y desde la derecha para la primera esquina, y luego también desde arriba y desde la derecha para la segunda esquina.
De forma opcional, con la función rect() también es posible redondear las esquinas. Para realizarlo, como quinto parámetro se indica la palabra clave round, y a continuación se introducen los radios para redondear esquinas, utilizando la sintaxis abreviada utilizada en las esquinas redondeadas.
En el siguiente ejemplo vamos a crear un rectángulo en el que, la primera esquina está arriba del todo (0) y desplazada 10 píxeles desde la izquierda, mientras que la segunda esquina está abajo del todo (50px) y desplazada 60 píxeles desde la izquierda. De modo que el ancho resultante será de 50 píxeles. Para completar el ejemplo, redondeamos las cuatro esquinas con un radio de 10 píxeles.
Código CSS:
.rect {
clip-path: rect(0 10px 50px 60px round 10px);
}
Resultado:
Tal y como se puede ver, el elemento de la derecha ha sufrido un recorte visual en forma rectangular y con esquinas redondeadas, que lo diferencia claramente del elemento de la izquierda, sin recortar.
La función ‘xywh()’
La función xywh() también permite definir una figura rectangular, pero en esta ocasión, el funcionamiento es distinto de inset() y rect(), ya que xywh() parte de la esquina superior izquierda para definir la primera esquina, y luego se usa dos valores más para definir el ancho y el alto de la figura.
Esta función admite un mínimo de cuatro valores numéricos que deben ser en unidades de longitud, relativas o absolutas. Los dos primeros valores son las coordenadas X e Y de la primera esquina del rectángulo. Los otros dos valores corresponden a la anchura y la altura, respectivamente.
Como viene siendo habitual en funciones para definir figuras geométricas rectangulares, existe la posibilidad (opcional) de redondear las esquinas. El quinto parámetro será la palabra clave round, que permite indicar que a continuación indicaremos el radio de redondeo de las esquinas del rectángulo.
Vamos a crear rectángulo cuya esquina inicial esté separada 5 píxeles de la izquierda y 10 píxeles de arriba, con un ancho de 60 píxeles y un alto del 50%.
Código CSS:
.xywh {
clip-path: xywh(5px 10px 60px 50% round 20px 5px);
}
Resultado:
A diferencia del elemento de la izquierda, el de la derecha tiene un recorte que le confiere una forma geométrica diferente respecto a la original.
