Toolipedia Insertar
ES
← Todas las herramientas de texto

Generador de CSS clip-path

Arrastra puntos para crear polígonos, círculos y formas, y copia el CSS de clip-path.

  • Gratis
  • Sin registro
  • Funciona en cualquier dispositivo

Acerca de Generador de CSS clip-path

Recorta elementos en triángulos, hexágonos, flechas, círculos o cualquier polígono personalizado arrastrando puntos en una vista previa, y luego copia el valor de clip-path. Las coordenadas basadas en porcentajes mantienen la forma adaptable. Recuerda que las áreas recortadas siguen existiendo, así que las sombras y los bordes también se cortan.

Cómo usar Generador de CSS clip-path

  1. Elige una forma, como polígono o círculo.
  2. Arrastra los puntos en la vista previa para remodelarla.
  3. Copia el CSS de clip-path y aplícalo a tu elemento.

¿Por qué usar esta herramienta?

También conocida como

Preguntas frecuentes

¿Por qué mi box-shadow se corta con clip-path?

Clip-path recorta todo lo que queda fuera de la forma, incluidas las sombras. Pon la sombra en un contenedor padre, usando filter: drop-shadow, para que siga el contorno recortado.

¿Puedo animar entre dos formas de clip-path?

Sí, si ambas formas usan la misma función con el mismo número de puntos. El navegador mueve entonces cada punto con suavidad durante una transición.

¿clip-path cambia el espacio que ocupa el elemento?

No. El elemento conserva su caja original en el diseño y solo se recorta el área visible. Los clics fuera de la forma visible también se ignoran.

¿Es gratis Generador de CSS clip-path?

Sí. Generador de CSS clip-path de Toolipedia es de uso gratuito, sin registro y sin marca de agua.

¿Es seguro usarlo?

Sí. Todo se calcula en tu navegador y nada de lo que introduces se envía a nuestro servidor.

¿Funciona en mi teléfono?

Sí. Funciona en cualquier navegador moderno en Android y iPhone, y también en tabletas y computadoras. No hay que instalar nada.

¿Necesito una cuenta?

No. Solo abre la página y usa la herramienta. No hace falta registrarse ni dar un correo electrónico.

¿Puedo poner Generador de CSS clip-path en mi propio sitio web?

Sí. Usa el botón «Insertar en tu sitio» debajo de la herramienta para copiar un fragmento corto de código y pegarlo en tu página. Es gratis, no necesita cuenta y la herramienta sigue funcionando dentro de tu página.

Herramientas relacionadas