Categoría: Desarrollo
Generador de clip-path CSS
Elige una forma y copia su valor de clip-path
Elige una forma, desde un círculo o elipse hasta un hexágono, una flecha o un bocadillo, ajusta cuánto se contrae desde los bordes y copia el valor de clip-path resultante con una vista previa en vivo.
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
Todo lo de esta página se procesa en tu navegador. No se sube nada.
Para qué sirve
Escribir un polígono de clip-path a mano implica calcular la posición porcentual de cada punto e imaginar cómo se conectan, lo que es lento de iterar para cualquier cosa más allá de un triángulo simple. Esta herramienta incluye un conjunto de formas comunes como listas de puntos ya preparadas, además de un único control de contracción que escala cada punto hacia el centro de la misma forma para cualquier figura, así que puedes previsualizar y copiar un clip-path utilizable sin hacer tú la geometría.
Cómo se usa
- Elige una forma.
- Ajusta la contracción para agrandarla o reducirla dentro de su caja.
- Copia la declaración clip-path.
Privacidad
Esta herramienta funciona íntegramente en tu navegador. Lo que introduces nunca se sube, se guarda ni se comparte: al cerrar la pestaña desaparece.
Preguntas frecuentes
- ¿Por qué círculo y elipse se comportan distinto a las demás formas?
- circle() y ellipse() usan un radio, así que ahí la contracción reduce el radio directamente, mientras que las formas de polígono escalan cada punto hacia el centro en el mismo porcentaje.
- ¿clip-path afecta al layout o solo a lo que se ve?
- Solo a lo que se ve. El elemento conserva su caja original a efectos de layout; clip-path solo oculta las partes fuera de la forma, de la misma manera en que overflow: hidden oculta el contenido fuera de una caja.
- ¿Se envía algo a un servidor?
- No. Los puntos de la forma se calculan en la página a partir de la forma y la contracción que elijas, por eso la vista previa se actualiza al instante.