Cómo crear efectos asombrosos con formas CSS

Feb 8, 2026

Cómo

[dieciséis]

Los desarrolladores frontend tienden a pensar en rectángulos; Rectángulos dentro de los rectángulos dentro de los rectángulos dentro de los rectángulos. Podríamos emplear trucos con fronteras para hacer círculos o triángulos, pero realmente siguen siendo solo cajas rectangulares disfrazadas. Bueno, esto está a punto de cambiar con CSS Formas, un W3c Recomendación candidata que cambiará la forma en que piensas.

Oferta de Navidad: Ahorre hasta un 47% en una suscripción a la revista Net

Las formas CSS le permiten crear formas geométricas con funciones de forma: círculo (), elipsis (), inserción () y polígono () y aplicarlos a elementos o efectos, como recorte y filtros. Además, las formas pueden afectar el flujo del contenido, lo que le permite envolver el texto cuidadosamente alrededor de las características como avatares circulares.

Quizás la función de la forma más poderosa es polígono (), ya que le permite crear formas arbitrarias complejas usando puntos ilimitados definidos utilizando pares de coordenadas. Si has usado Svg , esto te será familiar.

En este tutorial, usaremos polígonos con la propiedad de ruta de clip para cortar una forma geométrica de nuestro texto para que solo el área encerrada dentro del polígono sea visible. También agregaremos algunas transiciones simples para llevar el efecto a la vida. Puede tomar el código para cada paso en este repo de Github, aqui .

01. Comenzar con HTML

Primero, vamos a preparar nuestro HTML. Solo necesitamos un & lt; div & gt; , Ntro .acortar Clase y nuestro texto, pero al utilizar los pseudo-elementos para este efecto, también agregaremos un atributo con el mismo valor que el texto para que podamos leerlo en el CSS en lugar de codificarlo duro.

 & lt; DIV Class = "Clip" Data-content = "A Demo de recorte" & GT;
Una demostración de recorte
& lt; / DIV & GT;

A continuación, queremos que llene la pantalla y alinee el centro muerto de texto, podemos usar algunos Caja flexible Magia para esto. Vamos a estilizar y talla el texto.

 .clip {
// Pantalla de llenado
Posición: Absoluto;
TOP: 0;
izquierda: 0;
Ancho: 100%;
Altura: 100%;
// alineación
PANTALLA: FLEX; // use flexible para alineación
Justify-Contenido: Centro; // alineación horizontal
Alinee-Artículos: Centro; // alineamiento vertical
// Styling de texto
Fuente-familia: 'Trabajo Sans', Arial, Helvetica, Sans-Serif; // Work Sans está disponible en Google Fuentes
Peso de fuente: 800;
Tamaño de fuente: 8REM;
Text-alinec: Centro;
Transformación de texto: mayúscula;
}

02. Añadir algo de estilo

Ahora podemos stere el ::antes de y ::después Pseudo-elementos, con cada uno que se convierte en una capa en la parte superior del texto. Por defecto, ::después tendrá el índice Z más alto. El práctico attr () selector leerá el valor de nuestra contenido de datos atributo.

Los pseudoelementos compartirán las propiedades de la posición y FLEXBOX, para que podamos refactorar a nuestros CSS ligeramente y aprovechar el poder de SCSS para mantener nuestra hoja de estilo ordenada. Se heredará el estilo de la fuente. Estamos usando ... Para denotar las propiedades que ya hemos cubierto.

 .clip {
...
// posicionar uno mismo (y amp;) y pseudo-elementos (antes / después)
&amperio,
& amp; :: antes,
& amp; :: después {
  Posición: Absoluto;
  TOP: 0;
  izquierda: 0;
  Ancho: 100%;
  Altura: 100%;
  PANTALLA: FLEX; // use flexible para alineación
  Justify-Contenido: Centro; // alineación horizontal
  Alinee-Artículos: Centro; // alineamiento vertical
}
& amp; :: antes,
& amp; :: después {
  Contenido: ATTR (contenido de datos); // Utilice el valor del atributo como contenido
}
}

El resultado en el navegador debe parecer idéntico, porque los pseudo-elementos están sentados directamente en la parte superior del texto. Puedes modificar sus estilos en Devueta Para ver cómo están en capas.

03. Establecer fondos y colores.

Tiempo para darle a cada capa un color y fondo diferente: vamos a hacer algo en negrita, en la tendencia, colores de neón que hemos predefinido como variables. También podemos obligar al texto a envolver en múltiples líneas utilizando un truco de relleno de CSS en lugar de agregarlos en el HTML.

Esto es útil, ya que, de lo contrario, tendríamos que usar dos tipos diferentes de saltos de línea: & lt; br & gt; dentro de & lt; div & gt; y cuanto más oscurezca \A en el atributo.

.clip {
...
&amperio,
& amp; :: antes,
& amp; :: después {
  relleno: 0 50%;
  Tamaño de la caja: Border-Box;
}
& amp; :: antes {
  Color: $ blanco;
  Fondo: $ rosa;
}
& amp; :: después {
  Color: $ rosa;
  Fondo: $ azul;
}
}

El truco de relleno funciona al darle al texto el ancho horizontal cero del texto, forzando al navegador para envolver cada palabra a una nueva línea.

04. Clipear el texto

Tiempo para el bit interesante: estamos listos para comenzar a recortar nuestro texto. Vamos a crear un clip diagonal, cortando la pantalla en dos triángulos desde la parte inferior izquierda hasta la parte superior derecha.

los ::antes de El pseudo-elemento solo será visible en el triángulo superior izquierdo, y ::después El pseudo-elemento solo será visible en el triángulo inferior derecho. Aquí está el código para lograr eso:

 .clip {
...
& amp; :: antes {
  Clip-ruta: Polígono (0 0, 100% 0, 0 100%, 0 100%);
}
& amp; :: después {
  Clip-ruta: Polígono (100% 0, 100% 100%, 0 100%, 100% 0);
}
}

Esto crea polígonos con cuatro puntos. Cada punto es descrito por un par de coordenadas; simplemente un valor X (de izquierda a derecha) y y (de arriba a abajo). El valor puede ser absoluto (por ejemplo: px) o relativo (por ejemplo:%). Los puntos se hacen referencia a la parte superior izquierda, por lo que los puntos en 100% 100% están en la parte inferior derecha.

Imagine las líneas que conectan cada uno de los puntos en el orden en que se enumeran para formar las formas. En el ::antes de Polígono se inicia en la parte superior izquierda. (0 0) , se mueve a través de la pantalla a la parte superior derecha. (100% 0) , y luego hasta la parte inferior izquierda (0 100%) .

Ojalá estés viendo tu texto recortado ahora. Cambie el tamaño del navegador y verá que el recorte reaccione en consecuencia.

Si está utilizando Chrome, probablemente verá algunos problemas de repintación mientras cambia el tamaño, causado por las capas compuestas de Chrome. Desafortunadamente, porque la demostración es de pantalla completa, la recomendada. Will-Cambiar: Transformar propiedad y Transforma: traducez (0) Hack no rectifique esto. Sin embargo, si cambia .acortar a Posición: fijo; funciona.

 clip {
&amperio,
& amp; :: antes,
& amp; :: después {
  Posición: fijo;
}
}

Tenga en cuenta que Chrome está tratando de ser útil, y esta solución tendrá un impacto en el rendimiento. Asegúrese de perfilar el rendimiento al hacer cosas como esta en producción.

05. Añadir transiciones

Ahora que tenemos nuestro texto recortado, vamos a llevarlo a la vida con algunas transiciones. La buena noticia es que puedes simplemente transitar el ruta de clip Propiedad para que el navegador haga todo el trabajo duro. Permitemos las transiciones en los pseudo-elementos, y luego definen cuatro estados diferentes en la transición entre.

Estado 1: Este es el estado inicial, así que vamos a crear otros tres.

Agregue cada bloque en la parte inferior de su CSS a medida que avanza, para que pueda ver cómo se ve.

Estado 2: Mueve los triángulos separados ligeramente para revelar el fondo.

Esto se verá un poco como la bandera de la República del Congo. Eliminar el 20 por ciento de la punta de cada triángulo de polígono hará el truco.

Estado 3: Morph los triángulos en rectángulos.

Esto es similar al tricolor francés, a la inversa.

¿Qué pasa con esa cuarta coordinada pareja? Bueno, aquí es donde viene útil. Resulta que la transición ruta de clip Solo funciona si la función de forma utilizada es la misma (así que Polygon & GT; Polygon) y el número de puntos utilizados es el mismo: el navegador pasará cada punto individual. Es por eso que tenemos ese cuarto punto oculto, nos permite transitar sin problemas de un triángulo a un rectángulo, solo revelamos ese cuarto punto cuando lo necesitamos.

 .clip {
& amp; :: antes {
  Clip-ruta: Polígono (0 0, 40% 0, 40% 100%, 0 100%);
}
& amp; :: después {
  Clip-ruta: Polígono (100% 0, 100% 100%, 60% 100%, 60% 0);
}
}

Estado 4: Torce esos polígonos.

Pegado a nuestro tema de la bandera, esto se parecería a 'Necesito un tirón' en el mundo de la señalización de la bandera marítima.

Aquí estamos torciendo los polígonos para que se cruzen en el centro y formen dos triángulos cada uno. Esto es cuando las transiciones pueden ayudarlo a comprender los pares de coordenadas. Al disminuir realmente con la transición, puede ver cómo cada punto se mueve a través de la pantalla a su nueva posición, y comienza a comprender cómo el pedido de los pares afecta la transición. En realidad, le da mucho control sobre la transición.

.clip {
& amp; :: antes {
  Clip-ruta: Polígono (100% 0, 0 0, 100% 100%, 0 100%);
}
& amp; :: después {
  Clip-ruta: Polígono (100% 0, 100% 100%, 0 0, 0 100%);
}
}

Envolver

Todos estamos establecidos, pero aún no podemos cambiar los estados, lo que significa que no puede ver las transiciones en acción. Hay muchas maneras de lograr esto, por lo que depende de usted. En el Repo y Codepen, he usado una solución libre de javascritos de 100 por ciento con botones de radio ocultos y el selector de hermanos General, eche un vistazo. También puedes consultar este tutorial Codepen aquí .

Este artículo apareció originalmente en el número 298 de neto , la revista para diseñadores y desarrolladores profesionales web, que ofrecen las últimas tendencias web, tecnologías y técnicas nuevas. Comprar emito 298 aquí o Suscríbete a la red aquí .

Oferta especial de Navidad: Ahorre hasta un 47% en una suscripción a la red Para ti o un amigo para Navidad. Es una oferta limitada, así que moverse rápidamente ...

Artículos relacionados:

28 Ejemplos sobresalientes de CSS
Cómo crear un diseño de pirámide con formas CSS
Trucos de CSS para revolucionar tus diseños web.

Cómo crear efectos asombrosos con formas CSS

01. Comenzar con HTML

02. Añadir algo de estilo

03. Establecer fondos y colores.

04. Clipear el texto

05. Añadir transiciones

Envolver

Cómo - Artículos más populares

Composición en la animación: aprenda lo básico

Cómo agregar energía a sus dibujos de vida

Cómo dibujar figuras más realistas

Prepare una tabla para pintar en 3 sencillos pasos

Consejos de diseño de concepto para artistas

8 Secretos esenciales de seguridad de WordPress

Master la ciencia de la optimización de la tasa de conversión

Crea imágenes 3D interactivas con tres.js

Categorías