El proceso de diseño web casi siempre requiere de la transformación de elementos. Ya sea con su ubicación, color, grosor o forma, un diseñador está en constante manipulación de los elementos de su sitio web. En esta ocasión, te enseñaremos cómo utilizar la propiedad clip-path de CSS para modificar la forma de tus elementos.
¿Qué es la propiedad clip-path de CSS?
Al insertarse dentro de un elemento, la propiedad clip-path de CSS nos permite recortar el elemento en función de una forma geométrica. Es decir, esta propiedad nos ayuda a definir exactamente qué región del elemento estará visible y de qué forma. Entonces, el contenido dentro de la sección de la propiedad clip-path de CSS será visible, mientras que todo el contenido de fuera estará escondido.
A continuación, te explicamos exactamente cómo funciona.
¿Cómo funciona la propiedad clip-path de CSS?
La propiedad clip-path de CSS funciona a partir de palabras clave que definen la forma y los valores que determinan sus características. Cada una de las palabras clave que te mostramos a continuación representa una manera de crear el recorrido que definirá el límite del recorte. La mayoría de estos recorridos son una forma geométrica.
Circle
Al insertar esta palabra clave definimos un recorte en forma de círculo. Junto a esta palabra, debemos definir tres valores insertados dentro de paréntesis:
- El primer valor es el tamaño del recorte.
- El segundo es su ubicación en el ancho del elemento.
- El tercero es su ubicación en el alto del elemento.
Estos valores pueden ser dados en muchas unidades de medida, pero las más comunes son píxeles y porcentaje. Entonces, podríamos definir un recorte con la siguiente línea de código:
//Propiedad clip-path de CSS o etiqueta path
clip-path: circle (10% at 90% 70%)Ellipse
Similar a la opción circle, la opción ellipse de la propiedad clip-path de CSS etiqueta path html nos permite definir una elipse usando cuatro valores. Los primeros dos representan dos radios, uno vertical y otro horizontal, y los últimos dos representan los valores de posición.
Al igual que en la opción anterior, podemos definir los radios y posiciones usando píxeles y porcentajes, e incluso podemos mezclar unidades de medida.
Polygon
La opción polygon nos permite crear un recorte en forma de polígono. Para hacer esto, basta con definir el conjunto de vértices que tendrá el elemento. Entonces, podemos crear cualquier tipo de forma con solo definir la ubicación de sus vértices. Podemos, por ejemplo, crear un pentágono definiendo los siguientes cinco vértices con la unidad de porcentaje:
//propiedad clip-path de CSS etiqueta path en html
clip-path: polygon (50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%) Los vértices de un polígono en CSS se separan con comas. El primer valor del vértice representa su ubicación en el eje horizontal (x), mientras que el segundo valor representa la ubicación del vértice en el eje vertical (y). Te invitamos a revisar cómo crear distintos polígonos en este simulador.
Path
Esta opción nos permite crear un recorrido para diseñar todo tipo de formas e incluso determinar el recorrido de un objeto animado. Te invitamos a aprender más sobre esta opción y sus reglas SVG en la página oficial de la Mozilla Developer Network.
Inset
Esta opción crea un recorte dentro del elemento en forma de rectángulo. A diferencia de la opción de polígono, con la opción inset no definimos la posición de los vértices del rectángulo, sino que definimos su distancia de los bordes del elemento. Entonces, podemos usar cualquier unidad de medida CSS positiva para definir la distancia de cada borde del rectángulo del borde del elemento.
Ya que esta opción crea un rectángulo, podemos definir uno, dos o cuatro valores. Si insertamos un solo valor, todos los lados del rectángulo se distanciarán del borde. Si definimos dos valores, el primero afectará al lado superior e inferior del rectángulo, mientras que el segundo valor afectará al lado izquierdo y derecho del rectángulo. Finalmente, si insertamos cuatro valores, el primero es el lado superior, el segundo el lado derecho, el tercero el lado inferior y el cuarto el lado izquierdo.
El uso de round
Además de los valores que representan la distancia del borde del elemento, podemos hacer que nuestros rectángulos tengan bordes redondeados usando la palabra clave round. Entonces, tras insertar los valores de distancia, insertamos la palabra round y luego los valores de curva que queremos darle, sea a todos los bordes o a cada uno por separado.
Valores de curva
Ten presente que, si insertas cuatro valores de curva, el orden será en la dirección de las manecillas del reloj empezando por la esquina superior izquierda. Si insertas solo un valor este se aplicará a todas las esquinas. Pero si insertas dos valores, el primero afectará a la esquina superior izquierda y a la esquina inferior derecha, mientras que el segundo valor afectará a la esquina superior derecha y la esquina inferior izquierda. Te invitamos a que juegues con estas opciones en la página sobre la función inset de la MDN.
¿Cuál es el siguiente paso?
Ahora que sabes cómo utilizar la propiedad clip-path de CSS para crear recortes en elementos HTML, el siguiente paso es aplicar estos conocimientos en tu propia página web. Por ello, te invitamos a formar parte de nuestro Desarrollo Web Full Stack Bootcamp. Allí, además de seguir aprendiendo sobre CSS y los lenguajes de programación para web, crearás y diseñarás tus propias líneas de código con la guía de nuestros profesores. Así, al final del bootcamp, serás un experto en desarrollo web y tendrás cómo comprobarlo con tu propia página web. ¡Inscríbete ya y cambia tu futuro!
