Ejemplos de CSS clip-path en diseños reales

Elige el ajuste predefinido de hexágono, cambia a salida de declaración y copia la regla clip-path en tu propia clase de imagen cuadrada. Asigna la misma anchura y altura y object-fit: cover; el CSS de ejemplo completo usa una caja de demostración 4:3 y no debe pegarse sin cambios en el avatar. Comprueba el rostro cerca de todos los bordes; cambiar el polígono no mueve el sujeto.

Usa el chevrón en una imagen decorativa junto a una llamada a la acción. Compara un cuadro cuadrado y otro ancho: las coordenadas porcentuales pueden cambiar el ángulo. Revisa móvil y deja texto esencial y enlaces fuera de la zona recortada.

Aplica el paralelogramo a una capa decorativa detrás de la tarjeta. Recortar todo el contenedor puede ocultar títulos, botones o focos. Recorre el resultado con Tab y comprueba que los controles se vean en ambos anchos.

Parte del hexágono y cambia el primer punto a X 30%, Y 0%. Añade un punto después del seleccionado o elimina uno, manteniendo entre 3 y 32 puntos. Arrastra, introduce coordenadas del 0 al 100% o usa las flechas (1%; con Shift, 10%). Copia solo la declaración clip-path para conservar tu diseño; el CSS completo incluye estilos de demostración. Comprueba contenedores cuadrados y anchos en móvil y escritorio. Mantén texto y contornos de foco fuera del recorte y conserva una alternativa rectangular. No se admite importar CSS ni editar circle, ellipse o inset.

Toolars mantiene esta guía y la herramienta enlazada. Informe de cualquier diferencia entre las instrucciones y el resultado actual para revisarlos juntos.

El ejemplo descargable es una entrada de prueba sintética, no un caso de cliente. Mantenga la misma entrada y configuración al reproducirlo; compruebe el archivo descargado según las indicaciones, no solo la vista previa.

Las comprobaciones cubren solo este ejemplo. No certifican todos los archivos, navegadores ni aplicaciones de destino. Repítalas tras cambios en la herramienta y revise su propio resultado antes de compartirlo.

Muestras sintéticas de Toolars · actualización 2026-09-13. Ilustran el proceso, no la calidad de fotos o escaneos reales ni la aceptación de una plataforma.

La muestra CSS usa el preajuste hexágono. En CSS clip-path elija hexágono, punto horizontal 24 y vertical 50. Compare las dos declaraciones clip-path de la descarga y la muestra; pueden variar color y espacios. Pruebe elementos anchos y estrechos: los porcentajes siguen la caja. El recorte por sí solo no hace que el texto circundante rodee la figura.

Descargar muestra de entrada