Generador de ruta de clip
Cree formas de ruta de clip CSS visualmente, sin adivinar coordenadas manualmente. Elija entre 12 ajustes preestablecidos, arrastre puntos poligonales en la vista previa en vivo y copie el CSS con un solo clic.
Shape Presets
Live Preview
Drag the dots to reshape. Click + on edges to add points.
Shape Controls
Drag the colored dots on the preview to reshape. 4 points
CSS Output
polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
Browser support:clip-path is supported in all modern browsers (Chrome, Firefox, Safari 15.4+, Edge). For older Safari (<15.4), use the -webkit-clip-path prefix.
Características
- Arrastrar para editar: arrastre los puntos poligonales directamente en la vista previa visual para remodelarlos en tiempo real. No es necesario adivinar las coordenadas: vea exactamente cómo se ve la ruta del clip mientras la ajusta.
- 12 formas preestablecidas: comience con formas comunes: círculo, triángulo, diamante, hexágono, estrella, corazón y más. Cada ajuste preestablecido está ajustado para obtener el mejor punto de partida, listo para personalizarlo aún más.
- Salida CSS instantánea: copie el valor de la ruta del clip CSS o la declaración completa con un solo clic. Todos los navegadores modernos son compatibles sin necesidad de prefijos de proveedor.
- Funciona sin conexión: todo el procesamiento se realiza en su navegador, sin viajes de ida y vuelta al servidor. La herramienta funciona incluso sin conexión a Internet una vez cargada la página.
Casos de uso
- Recorte creativo de imágenes: recorte imágenes en formas personalizadas (diamantes, hexágonos, estrellas o polígonos) para obtener miniaturas de portafolios únicas, cuadrículas de galería y elementos visuales de secciones de héroes.
- Animaciones de paralaje y desplazamiento: agregue transiciones de ruta de clip para revelar elementos a medida que los usuarios se desplazan. Anima entre formas poligonales para obtener efectos suaves y modernos activados por desplazamiento.
- Divisores de tarjetas y secciones: utilice trazados de clip diagonales o curvos para crear divisores de secciones entre bloques de páginas. Mejor que las transformaciones CSS para mantener un diseño responsivo.
- Marcos de perfil y avatar: recorte las fotos de perfil de usuario en círculos, hexágonos o marcos poligonales personalizados para páginas de equipo, funciones sociales y directorios de usuarios.
- Diseño de página de destino y héroe: cree secciones de héroe llamativas con divisiones diagonales, formas superpuestas y trazados de clip asimétricos que guían la vista a través de la página.
- Activos geométricos de la marca: cree formas geométricas consistentes para ilustraciones de marca, fondos de íconos y elementos decorativos que coincidan con la identidad de su marca.
Preguntas frecuentes
La ruta de clip CSS se utiliza para recortar (ocultar) partes de un elemento de modo que solo sea visible una forma específica. Los usos comunes incluyen: recortar imágenes en formas personalizadas (círculos, polígonos, estrellas), crear divisores de sección diagonal, animar transiciones de página, realizar revelaciones con efecto de desplazamiento y crear elementos de diseño geométrico sin SVG ni recursos de imagen.
¡Sí! clip-path es una propiedad animable. Puede utilizar transiciones CSS o @keyframes para animar entre valores de ruta de clip. Para una transformación suave, asegúrese de que ambos estados utilicen la misma función de forma con el mismo número de puntos (por ejemplo, un polígono con 6 puntos se transforma en otro polígono con 6 puntos). Es posible que la animación entre diferentes tipos de formas (círculo a polígono) no se interpola suavemente en todos los navegadores.
La propiedad de clip anterior (en desuso) solo funcionaba con elementos absolutamente posicionados y aceptaba una forma rect(). clip-path es el reemplazo moderno que admite formas de círculo(), elipse(), inserción(), polígono() y ruta(), funciona con cualquier elemento posicionado y es completamente animable. Utilice siempre clip-path para nuevos proyectos.
Para que la animación de polígono a polígono sea fluida, ambos polígonos deben tener el mismo número de puntos. El navegador interpola la posición de cada punto de forma independiente. Por ejemplo, un hexágono de 6 puntas puede transformarse suavemente en una estrella de 6 puntas. Si el recuento de puntos difiere, la animación se ajustará en lugar de transformarse suavemente.
La función path() acepta datos de ruta SVG (sintaxis de atributo d) para crear formas de recorte completamente personalizadas. Por ejemplo: ruta de clip: ruta('M 50 0 L 100 50 L 50 100 L 0 50 Z'); crea un diamante. Esto le brinda posibilidades de formas ilimitadas más allá de lo que puede crear un círculo/elipse/inserto/polígono. Nota: ruta() requiere Safari 15.4+.
No: la ruta del clip solo afecta la representación visual del elemento. El cuadro delimitador original del elemento todavía ocupa el mismo espacio en el diseño de la página. Los eventos (hacer clic, pasar el cursor) solo se activarán dentro del área recortada visible en la mayoría de los navegadores modernos. Para un diseño verdaderamente no rectangular, considere usar formas CSS o formas exteriores.
Para polígonos, círculos, elipses y recuadros: no se necesita prefijo en los navegadores modernos (Chrome 55+, Firefox 54+, Safari 11+, Edge 79+). Para ruta(): Safari 15.4+ sin prefijo. Para navegadores muy antiguos, puede utilizar -webkit-clip-path como alternativa. La herramienta genera una ruta de clip estándar sin prefijo que funciona en todos los navegadores actuales.
¡Sí! clip-path se puede aplicar a cualquier elemento HTML, incluido el texto. Puede recortar el texto en formas específicas, pero el texto en sí se recorta, no se redistribuye. Para el texto que sigue un camino o una forma, utilice formas CSS con forma exterior. Un uso popular es la creación de animaciones de revelación de solo texto con transformación de ruta de clip.