viernes 27 septiembre 2024

Cómo recortar elementos con clip-path en CSS

¿Qué es `clip-path` y para qué se usa?

clip-path define un área de recorte que determina qué partes de un elemento son visibles y cuáles se ocultan. La forma de recorte se aplica a nivel de contenedor, y cualquier parte del elemento que se encuentre fuera de esta área definida no se mostrará en la página.

Se utiliza para:

Crear imágenes con formas personalizadas (círculos, triángulos, estrellas).
Recortar secciones de elementos HTML para efectos de diseño.
Aplicar transiciones y animaciones creativas.
Controlar el área visible de fondos y contenedores.

Puedes definir las formas de recorte usando funciones de CSS como circle(), ellipse(), polygon(), o incluso utilizando una imagen SVG como máscara de recorte.

Sintaxis de `clip-path`

clip-path: shape | url(#clip-svg) | inset() | circle() | ellipse() | polygon() | path();

shape: Define una forma básica como circle(), ellipse(), polygon(), inset(), etc.
url(#clip-svg): Usa una referencia a un elemento SVG para crear formas de recorte personalizadas.
inset(): Recorta la caja del elemento desde los bordes (similar a padding).
circle(): Define un círculo con radio y posición.
ellipse(): Define una elipse con radios y posición.
polygon(): Crea formas más complejas usando un conjunto de puntos en un sistema de coordenadas.

Ejemplos de uso de `clip-path`

Crear un recorte circular

Para recortar una imagen en forma de círculo:

<img src="imagen.jpg" alt="Imagen recortada" style="clip-path: circle(50%); width: 200px; height: 200px;">

Esto crea un círculo centrado, ya que 50% define el radio del círculo con respecto al tamaño del elemento.

Crear un recorte elíptico

Para recortar un contenedor en forma de elipse:

div {
    width: 300px;
    height: 200px;
    background-color: lightblue;
    clip-path: ellipse(75% 50% at 50% 50%);
}

Esto genera una elipse con radios 75% y 50% con el centro posicionado en el 50% horizontal y vertical del elemento.

Crear un recorte triangular

Puedes usar polygon() para crear un recorte triangular:

div {
    width: 200px;
    height: 200px;
    background-color: coral;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

El contenedor se recorta en un triángulo utilizando tres puntos (50% 0%, 0% 100%, 100% 100%), que representan los vértices del triángulo.

Recorte con una forma personalizada usando `polygon`

Para crear una estrella de 5 puntas usando clip-path:

div {
    width: 150px;
    height: 150px;
    background: gold;
    clip-path: polygon(
        50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 
        50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%
    );
}

Este polygon() utiliza un conjunto de coordenadas para dibujar cada uno de los puntos de la estrella.

Usar `inset()` para recortar los bordes

El recorte con inset() es similar a aplicar márgenes interiores (padding):

div {
    width: 300px;
    height: 200px;
    background: lightgreen;
    clip-path: inset(10px 20px 30px 40px);
}

Esto recorta el contenedor desde los bordes (superior, derecho, inferior e izquierdo), dejando visibles solo las partes internas.

Aplicar un recorte con una imagen SVG

Puedes definir formas complejas usando una máscara SVG. Primero crea un archivo SVG con la forma y referencia este en clip-path:

div {
    width: 300px;
    height: 300px;
    background: skyblue;
    clip-path: url(#mi-clip);
}

Y en el SVG:

<svg width="0" height="0">
    <defs>
        <clipPath id="mi-clip">
            <circle cx="150" cy="150" r="100" />
        </clipPath>
    </defs>
</svg>

Este ejemplo recorta el contenedor en la forma de un círculo definido en el elemento SVG.

Usar `path()` para recortes complejos

La propiedad clip-path también admite la función path(), que utiliza comandos de dibujo similares a SVG:

div {
    width: 200px;
    height: 200px;
    background-color: tomato;
    clip-path: path('M 50 0 L 100 50 L 50 100 L 0 50 Z');
}

La secuencia M, L y Z crea una forma de diamante usando un camino de líneas.

Aplicar animaciones con `clip-path`

Puedes animar clip-path para efectos visuales dinámicos:

div {
    width: 200px;
    height: 200px;
    background: purple;
    clip-path: circle(0% at 50% 50%);
    transition: clip-path 1s;
}

div:hover {
    clip-path: circle(50% at 50% 50%);
}

Al pasar el cursor por encima del div, la propiedad clip-path cambia de un círculo pequeño (0%) a uno más grande (50%), generando un efecto de expansión.

Consideraciones importantes

Compatibilidad: clip-path es compatible con la mayoría de los navegadores modernos, pero las formas complejas como path() pueden requerir prefijos o no ser compatibles con versiones más antiguas.
Reflujo de elementos: Al usar clip-path, solo se afecta la visibilidad del área recortada; el contenido sigue ocupando el mismo espacio en el flujo del documento.
Uso con imágenes y SVG: clip-path funciona bien con elementos HTML estándar y con imágenes SVG, lo que lo hace ideal para gráficos y efectos visuales complejos.

Referencia oficial

Para más información sobre clip-path, consulta la documentación oficial de MDN.

Etiquetas:

css

Creado por:

Jorge García

Fullstack developer

Cómo recortar elementos con clip-path en CSS

¿Qué es clip-path y para qué se usa?

Sintaxis de clip-path

Ejemplos de uso de clip-path