Generador de clip-path CSS
Generador de clip-path CSS: envuelve puntos polygon en una regla CSS clip-path copiable.
Coordenadas para un polígono
Introduce una lista de puntos con la sintaxis aceptada por polygon(), por ejemplo «50% 0%, 100% 100%, 0% 100%». El generador envuelve ese texto en una regla .recorte con clip-path. No cambia el orden ni calcula puntos intermedios.
Cómo se conectan los puntos
El navegador une cada coordenada con la siguiente y cierra la figura desde la última hasta la primera. En el ejemplo de tres puntos, el vértice superior centrado y las dos esquinas inferiores forman un triángulo. Reordenarlos puede cruzar los lados.
Porcentajes respecto de la caja
En «x y», la primera medida avanza horizontalmente y la segunda verticalmente dentro de la caja de referencia del elemento. 0% 0% es la esquina superior izquierda y 100% 100% la inferior derecha. Los porcentajes hacen que la forma acompañe el tamaño del elemento.
Sin validación geométrica
El campo se inserta como contenido de polygon(...) sin comprobar gramática, número de puntos o unidades. Una coma ausente, una coordenada incompleta o texto arbitrario produce CSS que el navegador puede ignorar. Valida la regla en el inspector del proyecto.
Recorte y contenido accesible
clip-path oculta visualmente lo que queda fuera, pero no reescribe el contenido ni su caja de diseño. Texto recortado puede seguir en el árbol accesible y resultar ilegible. Usa la forma en elementos decorativos o comprueba que la información esencial permanezca completa.
El recorte tampoco crea por sí mismo un borde que siga el polígono. border continúa perteneciendo a la caja rectangular. Para dibujar un contorno con la misma forma suelen usarse un SVG, un pseudo-elemento detrás o técnicas adicionales, que deben ajustarse al fondo y a la escala.
Puntos fuera del intervalo visible
CSS puede aceptar porcentajes negativos o superiores a 100%, situando vértices fuera de la caja. Eso no amplía necesariamente el área pintada y puede generar un recorte inesperado. Para una figura contenida, empieza con coordenadas entre 0% y 100% y cambia una posición cada vez.
Fuentes y referencias
Continúa con estas herramientas
Preguntas frecuentes
¿Qué forma crea 50% 0%, 100% 100%, 0% 100%?
Un triángulo con punta en el centro superior y base a lo largo del borde inferior.
¿Por qué importa el orden de puntos?
polygon() traza segmentos en la secuencia escrita; un orden distinto puede cruzar el contorno.
¿La herramienta avisa de una coordenada inválida?
No valida la gramática. El navegador decidirá si acepta o descarta la declaración.
¿Puedo usar píxeles?
CSS polygon() admite varias longitudes, pero los porcentajes suelen adaptarse mejor cuando cambia el elemento.
¿Elimina físicamente la parte recortada?
No. Limita la zona pintada; el elemento y su contenido siguen existiendo en el documento.
¿Incluye prefijo webkit?
El fragmento se centra en clip-path estándar. Añade compatibilidad adicional si tus navegadores objetivo la necesitan.
Herramienta de OCC Tools