Generador de CSS Clip-Path - Formas de Polígono, Círculo y Elipse Gratis
Genere valores CSS clip-path para formas de polígono, círculo y elipse con vista previa en vivo y formas predefinidas
Herramientas CSS
Tool
Shape Type
Preset Shapes
CSS
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
Cómo usar
1Elija un tipo de forma: polígono, círculo o elipse
2Para polígonos, haga clic en una forma predefinida (triángulo, pentágono, hexágono, estrella, flecha, cruz)
3Para círculo/elipse, ajuste los controles deslizantes de radio
4Vea la vista previa en vivo con el recorte aplicado a un elemento con degradado
5Copie el valor CSS clip-path y agréguelo a su elemento
Preguntas frecuentes
clip-path es una propiedad CSS que recorta (oculta) las partes de un elemento que están fuera de la forma definida. Admite formas de polígono, círculo, elipse y trazado SVG.
Sí. Todos los valores porcentuales en polygon() son relativos al cuadro delimitador del elemento, por lo que la forma se escala automáticamente con el tamaño del elemento.
Sí, siempre que ambos fotogramas clave utilicen el mismo tipo de forma y el mismo número de puntos del polígono. Las transiciones y animaciones CSS pueden interpolar suavemente entre dos valores clip-path.
clip-path es compatible con todos los navegadores modernos. Para navegadores más antiguos, puede ser necesario el prefijo -webkit- en versiones de Safari anteriores a la 13.