Diseño · utilidad Local
CSS Clip Path Generator
Edita polígonos arrastrando, con el teclado o mediante coordenadas. Usa cuatro formas predefinidas y copia una declaración clip-path o CSS completo de forma local.
Ruta de la tarea / de la entrada al resultado
Elige una forma inicial
Funciona en local · No se sube nada
Compara cuatro polígonos y utiliza los mismos ajustes en el espacio de trabajo. Cada vista previa usa el mismo polígono que su CSS. El tamaño inicial exportado es de 240 × 180 px.
Ajustar estos valores en el espacio de trabajoUsa un hexágono para un avatar de equipo o una serie de insignias.
#0f4cff.clipped-shape {
width: 240px;
aspect-ratio: 4 / 3;
background: #0f4cff;
-webkit-clip-path: polygon(24% 0%, 76% 0%, 100% 50%, 76% 100%, 24% 100%, 0% 50%);
clip-path: polygon(24% 0%, 76% 0%, 100% 50%, 76% 100%, 24% 100%, 0% 50%);
}Prueba un rombo inclinado en una imagen pequeña o un detalle decorativo.
#0f4cff.clipped-shape {
width: 240px;
aspect-ratio: 4 / 3;
background: #0f4cff;
-webkit-clip-path: polygon(65% 0%, 100% 50%, 35% 100%, 0% 50%);
clip-path: polygon(65% 0%, 100% 50%, 35% 100%, 0% 50%);
}Usa una forma inclinada de cuatro vértices para decorar una tarjeta.
#0f4cff.clipped-shape {
width: 240px;
aspect-ratio: 4 / 3;
background: #0f4cff;
-webkit-clip-path: polygon(18% 0%, 100% 60%, 82% 100%, 0% 40%);
clip-path: polygon(18% 0%, 100% 60%, 82% 100%, 0% 40%);
}Orienta el borde de un banner hacia la siguiente sección.
#0f4cff.clipped-shape {
width: 240px;
aspect-ratio: 4 / 3;
background: #0f4cff;
-webkit-clip-path: polygon(0% 0%, 82% 0%, 100% 50%, 82% 100%, 0% 100%, 18% 50%);
clip-path: polygon(0% 0%, 82% 0%, 100% 50%, 82% 100%, 0% 100%, 18% 50%);
}Empieza con el CSS de una forma de arriba y añade estas reglas al final. Sustituye la ruta y el texto alternativo por los tuyos. El contenedor mantiene la proporción 4:3; object-fit: cover recorta la imagen para llenarlo sin deformarla. Las coordenadas porcentuales se adaptan al tamaño del contenedor.
<img class="clipped-shape"
src="/your-image.jpg"
alt="Describe tu imagen"
width="240" height="180">.clipped-shape {
display: block;
max-width: 100%;
height: auto;
object-fit: cover;
}Hay cuatro plantillas y dos controles deslizantes. No se admite la edición libre de vértices, la importación de rutas SVG ni las curvas. Usa Copiar CSS o Descargar .css en el espacio de trabajo para guardar una regla personalizada.
Ruta de la tarea / de la entrada al resultado
Elige Hexágono, Rombo, Paralelogramo o Chevron. Los dos deslizadores ajustan la forma predefinida; editar un vértice activa el polígono personalizado.
Arrastra un vértice numerado o introduce sus coordenadas. Las flechas mueven el vértice enfocado un 1%; Mayús + flecha, un 10%. Añadir inserta un punto medio después del vértice seleccionado.
El ejemplo completo incluye tu color, 240px de ancho y proporción 4:3. El editor se adapta a la pantalla.
Revisa los bordes antes de exportar. Los controles numerados no forman parte del CSS.
Salida CSS: Solo declaración clip-path / CSS de ejemplo completo. El ejemplo completo incluye tu color, 240px de ancho y proporción 4:3. El editor se adapta a la pantalla.
Las coordenadas porcentuales se adaptan al elemento. Pega la declaración en una regla existente o usa .clipped-shape y comprueba el diseño en escritorio y móvil.
Generador de clip-path CSS usa su ruta de ejecución local verificada y no crea un historial oculto de entradas ni salidas.
Se ejecuta dentro de la pestaña actual del navegador.
Los datos activos de la herramienta nunca se convierten en un registro de documento de Toolars.
Usa el flujo de trabajo principal sin crear un perfil. Los favoritos se sincronizan con tu cuenta después de iniciar sesión.
Limpia la pestaña y los datos de trabajo activos desaparecen.
En una prueba local del 2026-09-24, parte del Hexágono predeterminado (horizontal 24 %, vertical 50 %). Selecciona el punto 1, cambia X del 24 % al 30 % y pon el color #ff6600. La vista previa muestra un polígono naranja de seis puntos con clip-path polygon(30% 0%, 76% 0%, 100% 50%, 76% 100%, 24% 100%, 0% 50%); los otros cinco puntos conservan su orden.
El CSS completo usa .clipped-shape con ancho 240px, proporción 4 / 3, fondo #ff6600 y ambas reglas -webkit-clip-path y clip-path. Copiar CSS coincidió con la descarga toolars-clip-path.css (240 bytes). En modo solo declaración, la copia dio exactamente clip-path: polygon(30% 0%, 76% 0%, 100% 50%, 76% 100%, 24% 100%, 0% 50%); (73 bytes UTF-8). Comprueba el recorte en tu propio diseño.
Cambia X del punto 1 a 101 %. El 2026-09-24, el editor indicó que los puntos deben ser finitos y estar entre 0 y 100 %; desaparecieron la vista previa y el CSS, y copiar y descargar quedaron desactivados. Volver a X = 30 % restaura polygon(30% 0%, 76% 0%, 100% 50%, 76% 100%, 24% 100%, 0% 50%). Los bordes cruzados no se corrigen solos.
Parte de cuatro formas predefinidas, añade, elimina o mueve vértices y exporta una declaración clip-path o un ejemplo CSS completo. Las coordenadas porcentuales se adaptan al elemento. Pega la declaración en una regla existente o usa .clipped-shape y comprueba el diseño en escritorio y móvil.
Preguntas frecuentes