Desarrollador / Formas con CSS

Generador de CSS clip-path: polígono, círculo, elipse e inset

Crea recortes CSS con seis ajustes preestablecidos de polígono, puntos arrastrables y ajustables con el teclado, y controles para círculo, elipse e inset. Previsualiza un degradado o una imagen local y copia CSS en porcentajes o píxeles.

Generador de CSS clip-path: polígono, círculo, elipse e inset: Recorta la previsualización con la forma seleccionada sin modificar el archivo de imagen original. La salida en porcentajes sigue las dimensiones del elemento. La salida en píxeles usa el ancho y el alto de referencia; la previsualización mostrada se escala para adaptarse a tu pantalla. Funciona al 100 % en tu navegador, sin subir archivos a ningún servidor.

Categoría
Herramientas de desarrollo
Se ejecuta
En tu navegador
Coste
Gratis · sin registro
Disponibilidad
Lista para usar
Banco de formas de trazado de recorteProcesamiento local

Funciona por completo en tu navegador

Arrastra un punto numerado, usa sus teclas de flecha o introduce las coordenadas. Las coordenadas siguientes son porcentajes; la salida en píxeles usa el tamaño de referencia.

Punto 1
Punto 2
Punto 3
Punto 4
Punto 5
Punto 6
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);

Las formas en porcentaje cambian de tamaño con el elemento. Los porcentajes del círculo usan la diagonal normalizada; los de la elipse usan la anchura y la altura. Las coordenadas en píxeles se fijan a las dimensiones de referencia.

Recorte CSS

clip-path en MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/clip-path . El recorte cambia la región visible sin modificar el cuadro de diseño del elemento.

Coordenadas de formas básicas

CSS Shapes Level 1 del W3C, formas básicas: https://www.w3.org/TR/css-shapes-1/#basic-shapes . Las coordenadas del polígono y los radios de la elipse se calculan respecto al cuadro de referencia; los porcentajes del círculo utilizan su diagonal normalizada. Las coordenadas predefinidas y el degradado son diseños originales.

Cómo se usa

  1. Elige una forma y un ajuste preestablecido, y define las dimensiones de referencia.
  2. Arrastra los puntos del polígono, usa las teclas de dirección o edita las coordenadas; ajusta los controles para las demás formas.
  3. Elige una salida en porcentajes o píxeles y copia el CSS.

Privacidad y límites

Las previsualizaciones opcionales de imágenes permanecen en tu dispositivo. No se sube nada.

Herramientas relacionadas

CSS GridSombra de cajaFlexbox

Preguntas frecuentes

¿Cómo edito un punto sin arrastrarlo?

Enfoca su control numerado y usa las teclas de dirección, o introduce los porcentajes X e Y en la lista de puntos. Los polígonos necesitan al menos tres puntos.

¿Esto exporta una imagen recortada?

No. Exporta CSS para un elemento HTML. La imagen local solo se usa para la previsualización.

¿Cómo se miden los porcentajes del círculo?

CSS usa la diagonal normalizada, sqrt((ancho al cuadrado + alto al cuadrado) / 2), como referencia del radio del círculo. Los radios de la elipse usan el ancho y el alto por separado.

Herramienta gratuita · se ejecuta en tu navegador · sin cuenta