Question 1

¿Qué es CSS clip-path?

Accepted Answer

La propiedad CSS clip-path recorta un elemento a una forma, ocultando el contenido fuera de la región definida. Soporta formas como circle, ellipse, polygon, inset y path, permitiendo efectos visuales creativos sin elementos extra.

Question 2

¿Todos los navegadores soportan clip-path?

Accepted Answer

Sí. clip-path es bien soportado en todos los navegadores modernos incluyendo Chrome, Firefox, Safari y Edge. Para navegadores más antiguos puede necesitarse el prefijo -webkit- para algunas formas, pero la cobertura para polygon e inset es excelente.

Question 3

¿Qué es la función polygon() en clip-path?

Accepted Answer

La función polygon() define una forma personalizada especificando una lista de pares de coordenadas (x y). Cada par representa un vértice del polígono. Las coordenadas usan porcentajes (relativos al elemento) o longitudes absolutas.

Question 4

¿Puedo animar formas clip-path?

Accepted Answer

¡Sí! Puedes animar entre dos formas clip-path que tengan el mismo número de puntos usando transiciones o animaciones CSS. Por ejemplo, animar de un inset rectangular a un círculo crea un suave efecto de morphing.

Question 5

¿Cuál es la diferencia entre clip-path y mask?

Accepted Answer

clip-path usa una forma geométrica para recortar un elemento con bordes duros. CSS mask usa una imagen (incluidos gradientes) como máscara alpha, soportando bordes suaves y transparencia compleja. clip-path es más simple y eficiente para formas geométricas.

Generador CSS Clip-Path

Preguntas Frecuentes

Comments & Feedback