Clip-path - Trucos CSS | Almanaque CSS 2024

La clip-pathpropiedad en CSS le permite especificar una región específica de un elemento para mostrar, con el resto oculto (o "recortado").

.clip-me ( /* Example: clip away the element from the top, right, bottom, and left edges */ clip-path: inset(10px 20px 30px 40px); /* or "none" */ /* Example: clip element into a Heptagon */ clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%); /* Deprecated version */ position: absolute; /* absolute or fixed positioning required */ clip: rect(110px, 160px, 170px, 60px); /* or "auto" */ /* values descript a top/left point and bottom/right point */ )

Solía haber una clippropiedad, pero tenga en cuenta que está en desuso.

El caso de uso más común sería una imagen, pero no se limita a eso. Puede aplicarlo fácilmente clip-patha una etiqueta de párrafo y solo a una parte del texto.

 
 I'll be clipped.

Esos cuatro valores en inset()(en el CSS anterior) representan el punto superior / izquierdo y el punto inferior / derecho , que forma el rectángulo visible. Todo lo que está fuera de ese rectángulo está oculto.

Esta imagen de Louis Lazaris explica muy bien los cuatro puntos de la **sintaxis** **antigua`clip: rect();`** .

Otros valores posibles:

.clip-me ( /* referencing path from an inline SVG */ clip-path: url(#c1); /* referencing path from external SVG */ clip-path: url(path.svg#c1); /* polygon */ clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%); /* circle */ clip-path: circle(30px at 35px 35px); /* ellipse */ clip-path: ellipse(65px 30px at 125px 40px); /* inset-rectangle() may replace inset() ? */ /* rectangle() coming in SVG 2 */ /* rounded corners… not sure if a thing anymore */ clip-path: inset(10% 10% 10% 10% round 20%, 20%); )

Ejemplo de ruta de un clip SVG:

Es muy extraño que clip-pathno sea compatible con la path()función desde el principio, ya path()que ya es algo para propiedades como motion-path. Sin embargo, Firefox tiene soporte para él ahora, y estamos esperando el resto de los navegadores. Consulte una implementación inicial de clip-path: path ();

Haz lo tuyo

Hasta que podamos usarlo de manera confiable path(), los clips más útiles para formas personalizadas elegantes son polygon(). Aquí hay un editor realmente bueno para los de Mads Stoumann (que también funciona para círculos y elipses):

Más información

Recorte y enmascaramiento en CSS
clip-path en WPD
clip-path en MDN
Clippy: el creador de rutas de clips de Bennett Feely
Recorte y enmascaramiento en MDN
La propiedad de clip CSS (obsoleta) (Webs impresionantes)
Especificaciones sobre enmascaramiento CSS
Enmascaramiento CSS por Dirk Schulze
Recorte en CSS y SVG: la propiedad y el elemento de ruta de clip por Sara Soueidan
Bolígrafos etiquetados con ruta de clip en CodePen
Demostraciones y soporte de navegador de demostración Pen by Yoksel
Máscaras SVG de Jakob Jenkov
Investigación de Alan Greenblatt sobre los niveles de compatibilidad del navegador para las funciones de recorte y enmascaramiento

Soporte del navegador

Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.