Generador CSS Clip-Path - Crear Formas Visualmente Online
Crea formas CSS clip-path con editor visual drag-and-drop. Genera polígonos, círculos, elipses y paths inset con vista previa en vivo.
Preguntas Frecuentes
Que es CSS clip-path?
CSS clip-path es una propiedad que crea una region de recorte para determinar que partes de un elemento son visibles. Todo lo que esta dentro de la forma de recorte se muestra, y lo que esta fuera se oculta. Soporta varias funciones de forma: polygon() para formas de multiples puntos arbitrarios, circle() para regiones circulares, ellipse() para regiones ovaladas e inset() para regiones rectangulares con esquinas redondeadas opcionales. Se usa ampliamente para crear disenos no rectangulares, divisores de secciones decorativos, mascaras de imagenes y elementos de interfaz creativos.
Como uso este generador de clip-path?
Selecciona un tipo de forma (Polygon, Circle, Ellipse o Inset) en las pestanas. Para poligono, arrastra los puntos de control en el lienzo para dar forma, haz clic en un borde para agregar nuevos puntos, o selecciona una forma preestablecida como punto de partida. Para circulo/elipse, ajusta el radio y la posicion central usando controles deslizantes o entradas numericas. Para inset, establece los valores de inset superior, derecho, inferior e izquierdo, y opcionalmente agrega border-radius. Observa la vista previa actualizarse en tiempo real y luego copia el codigo CSS generado con un clic.
Son seguros mis datos? Se envia algo a un servidor?
Si, tus datos estan completamente seguros. Esta herramienta se ejecuta completamente en tu navegador usando JavaScript del lado del cliente. Ningun dato de imagen, configuracion de forma ni otra informacion se envia a ningun servidor. Todos los calculos se realizan localmente en tu dispositivo, garantizando total privacidad.
Cual es la diferencia entre unidades de porcentaje y pixel?
Los valores en porcentaje (%) son relativos a las dimensiones del elemento, haciendo tu clip-path responsivo: se escala automaticamente cuando el elemento cambia de tamano. Los valores en pixeles (px) son absolutos y fijos, lo que significa que el clip-path mantiene el mismo tamano sin importar las dimensiones del elemento. Usa porcentajes para disenos responsivos (recomendado) y pixeles cuando necesites regiones de recorte de tamano fijo exacto.
Puedo animar entre formas de clip-path?
Si, las formas CSS clip-path pueden animarse usando transiciones y animaciones CSS. El requisito clave es que las formas inicial y final deben usar la misma funcion de forma (por ejemplo, ambas polygon()) y tener el mismo numero de puntos. Por ejemplo, puedes hacer una transicion suave de un triangulo a otro triangulo, o transformar un cuadrado en un diamante. Simplemente aplica 'transition: clip-path 0.3s ease' al elemento.
Que formas preestablecidas estan disponibles?
La herramienta proporciona una biblioteca de formas poligonales preestablecidas que incluyen: Triangulo, Diamante, Pentagono, Hexagono, Octagono, Estrella, Flecha Derecha, Cruz, Trapezoide y Bisel. Cada preestablecido puede aplicarse con un clic y luego personalizarse arrastrando los puntos de control para crear la forma deseada.
Que navegadores soportan CSS clip-path?
CSS clip-path con formas basicas (polygon(), circle(), ellipse(), inset()) ha sido soportado desde enero de 2020 y funciona en todos los navegadores modernos: Chrome 90+, Firefox 88+, Safari 14+ y Edge 90+. Para navegadores WebKit antiguos, puede ser necesario el prefijo de proveedor -webkit-clip-path. La funcionalidad se considera estandar y segura para uso en produccion.
Ejemplos de Codigo
// CSS Clip-Path Generator - JavaScript Implementation
// Generate polygon clip-path from an array of [x, y] coordinate pairs
function generatePolygonClipPath(points) {
const coords = points
.map(([x, y]) => `${x}% ${y}%`)
.join(', ');
return `clip-path: polygon(${coords});`;
}
// Generate circle clip-path
function generateCircleClipPath(radius, centerX = 50, centerY = 50) {
return `clip-path: circle(${radius}% at ${centerX}% ${centerY}%);`;
}
// Generate ellipse clip-path
function generateEllipseClipPath(radiusX, radiusY, centerX = 50, centerY = 50) {
return `clip-path: ellipse(${radiusX}% ${radiusY}% at ${centerX}% ${centerY}%);`;
}
// Generate inset clip-path with optional border-radius
function generateInsetClipPath(top, right, bottom, left, borderRadius = 0) {
const inset = `${top}% ${right}% ${bottom}% ${left}%`;
if (borderRadius > 0) {
return `clip-path: inset(${inset} round ${borderRadius}%);`;
}
return `clip-path: inset(${inset});`;
}
// Common preset shapes
const PRESETS = {
triangle: [[50, 0], [100, 100], [0, 100]],
diamond: [[50, 0], [100, 50], [50, 100], [0, 50]],
hexagon: [[25, 0], [75, 0], [100, 50], [75, 100], [25, 100], [0, 50]],
star: [[50, 0], [61, 35], [98, 35], [68, 57], [79, 91], [50, 70], [21, 91], [32, 57], [2, 35], [39, 35]],
};
// Usage
console.log(generatePolygonClipPath(PRESETS.triangle));
// clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
console.log(generateCircleClipPath(40, 50, 50));
// clip-path: circle(40% at 50% 50%);
console.log(generateInsetClipPath(5, 10, 5, 10, 15));
// clip-path: inset(5% 10% 5% 10% round 15%);