Trucos para cortar esquinas usando la máscara CSS y las propiedades Clip-Path trucos CSS

Recientemente analizamos la creación de límites fantásticos con CSS mask properties, y ahora cortaremos las esquinas con CSS mask y clip-pathHay muchas técnicas para cortar diferentes formas de las esquinas de cada elemento. En este artículo, veremos técnicas modernas para crear formas de esquina únicas mientras tratamos de trabajar con código reutilizable que nos permite producir diferentes resultados ajustando variables. .

Controlar esta herramienta en línea para tener una idea de lo que estamos construyendo. Este es un generador de CSS en el que eliges la forma, los ángulos y el tamaño, ¡y luego obtienes el código en poco tiempo!

Básicamente tenemos dos tipos de cortes: un circular uno y uno ángulomi Para cada uno de ellos podemos obtener la forma completa o la forma solo en el borde, sin mencionar que podemos elegir los ángulos que queremos cortar. ¡Muchas combinaciones!

Como en el artículo anterior, usaremos mucho CSS mask Por lo tanto, si no está familiarizado con él, le recomiendo que lea la introducción rápida que escribí antes de continuar.

corte redondo

Para corte redondo o redondeado utilizaremos radial-gradient()Para cortar cuatro esquinas, la solución lógica es crear cuatro degradados, uno para cada esquina:

Cada degradado ocupa una cuarta parte del tamaño del elemento. La sintaxis del gradiente es evidente:

radial-gradient(circle 30px at top left, #0000 98%, red) top left;

Traducido, esto representa un círculo en la esquina superior izquierda con un 30px radio. El color base es transparente (#0000) y el resto es red. Todo el gradiente también está configurado para comenzar desde la esquina superior izquierda del elemento. La misma lógica para los otros tres gradientes. la palabra clave circle se puede omitir porque especificamos explícitamente un valor para el radio.

Como hice en el artículo anterior, esta vez usaré valores un poco más grandes o más pequeños para evitar un mal resultado visual. yo uso aquí 98% en lugar de 100% para evitar bordes dentados y 51% en lugar de 50% para crear una superposición entre degradados y evitar espacios en blanco. Esta lógica seguirá a lo largo del artículo. De hecho, encontrará que agregar o eliminar 1% o 1deg generalmente resulta en una buena visualización.

Aplicamos esto a CSS mask propiedad y estamos listos!

De hecho, podemos optimizar un poco este código:

--g: #0000 98%,#000;
--r: 30px;
mask:
  radial-gradient(var(--r) at 0    0   ,var(--g)) 0    0,
  radial-gradient(var(--r) at 100% 0   ,var(--g)) 100% 0,
  radial-gradient(var(--r) at 0    100%,var(--g)) 0    100%,
  radial-gradient(var(--r) at 100% 100%,var(--g)) 100% 100%;
mask-size: 51% 51%;
mask-repeat: no-repeat;

De esta manera usamos propiedades personalizadas para valores redundantes y como preferencia personal uso valores numéricos para posiciones en lugar de palabras clave.

En el generador usaré la siguiente sintaxis:

--g: #0000 98%,#000;
--r: 30px;
mask:
  radial-gradient(var(--r) at 0    0   ,var(--g)) 0    0   /51% 51% no-repeat,
  radial-gradient(var(--r) at 100% 0   ,var(--g)) 100% 0   /51% 51% no-repeat,
  radial-gradient(var(--r) at 0    100%,var(--g)) 0    100%/51% 51% no-repeat,
  radial-gradient(var(--r) at 100% 100%,var(--g)) 100% 100%/51% 51% no-repeat;

La sintaxis abreviada es más fácil de generar y el valor completo se puede usar como una propiedad personalizada.

¿Podemos usar menos gradientes si queremos?

¡Por supuesto! Un degradado puede hacer el trabajo. Mantenga presionado el cursor del mouse a continuación para ver el truco:

Aquí definimos uno radial-gradient() sin tamaño (el valor predeterminado es 100% altura y 100% ancho). Esto nos da un agujero en el centro. Traducimos/movemos el degradado con la mitad del ancho y alto de la imagen para mover el agujero en una esquina. Debido a que la máscara CSS se repite de forma predeterminada, obtenemos lo mismo en cada esquina. ¡Tenemos cuatro esquinas cortadas con un solo degradado!

La única desventaja de este método es que necesitamos saber de antemano el ancho y alto del elemento.

¿No podemos usar -50% en lugar de la mitad de ancho y alto?

Desafortunadamente, no podemos hacer esto aquí porque los porcentajes no se comportan de la misma manera que los valores de píxel cuando se usan con CSS. mask-position son complejos

tengo un detallado Respuesta de desbordamiento de pila esto explica la diferencia background-position pero la misma lógica se aplica a CSS mask-position Propiedad.

Sin embargo, podemos usar algunos trucos para que funcione con porcentajes y sin necesidad de saber el ancho ni el alto. Cuando un degradado (o capa de fondo) tiene un ancho y una altura iguales al elemento, no podemos movernos usando valores porcentuales. ¡Así que tenemos que cambiar su tamaño!

Especificaré un tamaño igual a 99.5% 99.5%Disminución 0.5% de la anchura y la altura para tener un valor diferente de 100% y al mismo tiempo mantenemos el mismo resultado visual, ya que no notaremos mucha diferencia entre 100% y 99.5%Ahora que nuestro gradiente tiene un tamaño diferente de 100% podemos moverlo usando porcentajes.

No describiré todas las matemáticas en detalle, pero para moverlas a la mitad del ancho y la altura que necesitamos, usamos esta ecuación:

100% * (50/(100 - 99.5)) = 100% * 100 = 10000%

Este es un valor extraño, pero funciona:

Como puedes ver, el truco funciona bien. Cualquiera que sea el tamaño del elemento, podemos cortar cuatro esquinas usando solo un degradado. Sin embargo, este método tiene un pequeño inconveniente cuando el ancho o alto del elemento es decimal valor Aquí hay un ejemplo con un ancho de imagen igual a 150.5px:

El uso de 99.5% combinado con 150.5px creará problemas de redondeo que distorsionarán el cálculo, lo que provocará una alineación incorrecta de la máscara. Por lo tanto, utilice este método con precaución.

Para superar el problema del redondeo, podemos combinar el último truco con un pseudoelemento. Aquí hay una ilustración paso a paso para entender la idea:

Esto es lo que está pasando allí:

1. Definimos un pseudo-elemento que se comporta como nuestra capa de fondo, lógicamente debemos usar inset:0 para cubrir toda el área, pero crearemos un pequeño desbordamiento con la ayuda inset: -10% lo que significa que el pseudo-elemento desbordará cada país en un 10%.
2. Establecemos nuestra máscara CSS en el pseudoelemento. El tamaño de la máscara debe corresponder al tamaño del elemento principal, no al pseudo-elemento. En otras palabras, será más pequeño que el tamaño del pseudoelemento y esto es lo que queremos poder mover con la ayuda de valores porcentuales. Una vez que hagamos los cálculos, el tamaño debe ser 100%/1.2Observe en la demostración anterior que la máscara CSS está en el marco verde para que coincida con el tamaño del contenedor.
3. Ahora necesitamos moverlo de una manera que simule cortar la esquina del elemento principal. El centro del agujero debe estar en la esquina del elemento principal, como se muestra en la demostración. Para hacer esto, usamos mask-position: 300% 300% ( 300% = 50%/(1 - 1/1.2) ).
4. eliminamos no-repeat para activar la repetición y obtener el mismo efecto en cada esquina.
5. ¡Cortamos el desbordamiento y obtenemos el resultado final!

Sé que es un poco redundante, pero funciona y solo requiere un degradado en lugar de cuatro.

Resumamos rápidamente los tres métodos que acabamos de ver:

• El primer método utiliza cuatro gradientes y no tiene inconvenientes en términos de uso. Por supuesto, es prolijo, pero funciona con todo tipo de elementos y tamaños. Recomiendo usar este.
• El segundo método usa un degradado y funciona con cada elemento, pero puede fallar en algunos casos específicos. Adecuado con elementos de tamaño fijo. Es bueno usarlo, pero tal vez con menos frecuencia.
• El tercer método usa un degradado y requiere un pseudo-elemento. ella no va a trabajar con el <img> y otros elementos que no pueden soportar el pseudo-elemento.

El generador solo admite el primer y el tercer método.

Ahora que hemos visto el caso con todos los ángulos, desactivemos algunos de ellos. Usando el primer método, cualquier ángulo que queramos mantener sin cortar, simplemente eliminamos su degradado y ajustamos el tamaño de lo que queda.

Para deshabilitar la esquina superior derecha:

• Elimina el degradado superior derecho (azul).
• Tenemos una esquina vacía, por lo que aumentamos el tamaño del degradado rojo (o morado) para cubrir este espacio restante.

¡Hecho!

Probablemente veas cuántas posibilidades y combinaciones podemos hacer aquí. Si queremos reducir N esquinas (donde N varía de 1 para 4), usamos N gradientes Lo único que necesitamos es establecer el tamaño adecuado para cada uno de ellos para que no nos deje espacio.

¿Qué pasa con otros métodos donde solo hay un gradiente? ¡Necesitaremos otro gradiente! Estos dos métodos utilizan sólo una radial-gradient() para cortar las esquinas para que podamos confiar en otro degradado para "ocultar" el corte. Podemos usar un conic-gradient() con cuatro secciones para esta tarea:

conic-gradient(red 25%, blue 0 50%, green 0 75%, purple 0)

Agréguelo a la parte superior del degradado radial para obtener lo siguiente:

EN conic-gradient() cubiertas de radial-gradient() y no se corta ninguna esquina. Cambiemos un color en conic-gradient() a transparente. El de arriba a la derecha, por ejemplo:

¿Viste eso? Descubrimos un rincón de radial-gradient() ¡y terminamos con una esquina cortada!

Ahora hagamos lo mismo, pero para la esquina inferior izquierda.

Creo que probablemente ya entiendas el truco. Cambiando los colores de conic-gradient() de opaco a transparente, revelamos los ángulos que queremos cortar y obtenemos todo tipo de combinaciones posibles, lo mismo se puede hacer con el tercer método.

Corte redondo solo para borde

Hagamos una versión solo para el borde de la forma anterior. Es decir, conseguimos el mismo formulario, pero borramos el relleno, por lo que solo nos queda el límite del formulario.

Esto es un poco complicado porque tenemos diferentes casos con diferentes códigos. Honestamente, usaré muchos gradientes aquí mientras encuentro formas de reducir su número.

Cabe señalar que en este caso consideraremos un pseudo-elemento. Mostrar solo el borde significa que tenemos que ocultar el "relleno" interno del formulario. Aplicar esto al elemento principal también ocultará el contenido, por lo que este es un buen uso de un pseudo-elemento.

una esquina cortada

Este necesita un gradiente radial y dos gradientes cónicos:

el primer ejemplo ilustra el degradado radial (en rojo) y los dos degradados cónicos (en azul y verde). En el segundo ejemplo, los aplicamos todos en CSS. mask propiedad para crear una forma solo para un borde con una esquina cortada.

Como muestra el diagrama, radial-gradient() crea un cuarto de círculo y cada conic-gradient() crea dos segmentos perpendiculares para cubrir dos lados. Cabe señalar que la superposición de gradientes no es un problema, ya que no cambiaremos el CSS mask-composite valor de la propiedad.

Usando el mismo código y ajustando varias variables, podemos obtener la forma para los otros ángulos.

Dos esquinas cortadas

Para la configuración de dos ángulos, tenemos dos situaciones.

En la primera situación hay dos ángulos opuestos, donde necesitamos dos gradientes radiales y dos gradientes cónicos.

La configuración es casi la misma que recortar solo una esquina: agregamos un degradado adicional y actualizamos varias variables.

En la segunda situación hay dos ángulos adyacentes y en este caso necesitamos dos gradientes radiales, uno cónico y otro lineal.

"¡Esperar!" puedes exclamar. "¿Cómo un gradiente cónico cubre tres lados?" Si revisa el código, observe repeat-yEn todos los ejemplos siempre hemos usado no-repeat para gradientes, pero para esto podemos repetir uno de ellos para cubrir más países y reducir la cantidad de gradientes que usamos.

Aquí hay un ejemplo con conic-gradient() para entender la repetición. El truco es tener una altura igual a 100% menos el tamaño del límite para que el gradiente llene este espacio en repetición, lo que cubre a la tercera parte en el proceso.

Tres esquinas cortadas

Para esta configuración necesitamos tres gradientes radiales, un gradiente cónico y dos gradientes lineales.

cortar cuatro esquinas

Se necesitan cuatro degradados radiales y dos degradados lineales para cortar las cuatro esquinas.

Te escucho gritar: "¿Cómo diablos tengo que recordar todos estos casos?" No necesita recordar nada, ya que puede generar fácilmente el código por si acaso, usando generador en línea. Todo lo que necesitas es entender todo el truco, no todos los casos. Es por eso que entro solo en detalles finos sobre las primeras configuraciones; el resto son solo iteraciones que cambian la base original del truco.

Tenga en cuenta que hay un modelo general que seguimos en los ejemplos:

1. Agregamos un radial-gradient() en las esquinas que queremos cortar.
2. Rellenamos los laterales con ayuda de un conic-gradient() o un linear-gradient() para crear la forma final.

Cabe señalar que podemos encontrar diferentes formas de crear una misma forma. Lo que muestro en esta publicación son los métodos que encontré mejores después de probar muchas otras ideas. ¡Puede tener un enfoque diferente que crea que es mejor! Si es así, definitivamente compártelo en los comentarios.

corte de esquina

Tratemos con otro tipo de forma de corte: sección angular.

Tenemos dos parámetros: Talla y ángulo Para obtener la forma, necesitamos un conic-gradient() para cada rincón. Esta configuración es muy similar al ejemplo que inició este artículo.

Aquí tienes una ilustración de una esquina para que entiendas el truco:

La diferencia entre cada ángulo es un desplazamiento adicional de 90deg en from y en at posición. El código completo es el siguiente:

--size: 30px;
--angle: 130deg;

--g: #0000 var(--angle), #000 0;
mask:
  conic-gradient(from calc(var(--angle)/-2 -  45deg) 
    at top    var(--size) left  var(--size),var(--g)) top left,
  conic-gradient(from calc(var(--angle)/-2 + 45deg) 
    at top    var(--size) right var(--size),var(--g)) top right,
  conic-gradient(from calc(var(--angle)/-2 - 135deg) 
    at bottom var(--size) left  var(--size),var(--g)) bottom left,
  conic-gradient(from calc(var(--angle)/-2 + 135deg) 
    at bottom var(--size) right var(--size),var(--g)) bottom right;
mask-size: 51% 51%;
mask-repeat: no-repeat;

Si queremos desactivar una esquina, la quitamos conic-gradient() para esta esquina y actualice el tamaño de otra para llenar el espacio restante tal como lo hicimos con el corte circular. Esto es lo que parece para una esquina:

Podemos hacer exactamente lo mismo para todos los demás ángulos para obtener el mismo efecto.

Además de la máscara CSS, también podemos usar CSS clip-path propiedad de recorte de esquina Cada esquina se puede definir con tres puntos.

Los demás ángulos tendrán el mismo valor con el desplazamiento de 100%Esto nos da el código final con un total de 12 puntos, tres en ángulo.

/* I will define T = [1-tan((angle-90)/2)]*size */
clip-path: polygon(
  /* Top-left corner */
  0 T, size size,0 T, /* OR 0 0 */
  /* Top-right corner */
  calc(100% - T) 0,calc(100% - size) size,100% T, /* OR  100% 0 */
  /* Bottom-right corner*/
  100% calc(100% - T),calc(100% - size) calc(100% - size), calc(100% - T) 100%, /* OR 100% 100% */
  /* Bottom-left corner */ 
  T 100%, size calc(100% - size),0 calc(100% - T) /* OR 0 100% */
)

Aviso OR comentarios en este código. Define el código que debemos tener en cuenta si queremos desactivar un ángulo concreto. Para cortar un ángulo, usamos tres puntos. Para cortar un ángulo, usamos un punto, que no es más que la coordenada de ese ángulo.

En un ángulo solo en el borde

uf, finalmente ¡hemos llegado a la última y más compleja forma! Esto se puede lograr con gradientes o clip-pathpero sigamos con clip-path Que se acerca.

Las cosas se volverán complicadas y prolijas si usamos el enfoque de gradiente. Aquí hay una demostración que ilustra este punto:

Hay un total de nueve gradientes y estoy todavía no hecho con el cálculo. Como puedes ver, el grosor del borde es incorrecto, además el resultado final no es satisfactorio debido a la naturaleza de los degradados y los problemas con su suavizado. Este enfoque puede ser un buen ejercicio para aumentar el límite de gradiente, pero no lo recomiendo en un entorno de producción.

Así que, de vuelta a clip-path Sin embargo, terminaremos con un código detallado, pero con menos trabajo, ya que el generador puede hacer el trabajo por nosotros con un resultado final más limpio.

Aquí hay una descripción general de la carretera. Agrego un pequeño espacio para ver mejor los diferentes puntos, pero en su lugar necesitamos superposición de puntos.

La forma en que calculamos los puntos exteriores es la misma que hicimos para la sección angular habitual. Sin embargo, para los puntos internos, necesitamos más matemáticas. No se preocupen, les guardaré una pequeña explicación "aburrida" de la geometría porque sé que la mayoría de ustedes no la quieren, pero en caso de que necesiten profundizar en esto, pueden consultar el archivo JavaScript en generador para encontrar el código y las matemáticas que uso para generar el formulario.

EN 180deg caso especial

Antes de terminar, hay un caso especial para el ángulo de corte que quiero llamar. Aquí es donde usamos un ángulo igual a 180degEsto es lo que produce:

Tenemos una línea recta en la esquina para que podamos optimizar clip-path código. Para la forma completa podemos usar ocho puntos (dos puntos en ángulo) en lugar de 12. Y para la versión con bordes solo podemos usar 18 puntos (nueve puntos internos y puntos externos) en lugar de 26. En otras palabras, podemos eliminar el punto medio.

La forma del límite solo se puede hacer con degradados, pero en lugar de usar nueve degradados, como hicimos antes, podemos usar solo cuatro degradados lineales y un resultado limpio.

Conclusión

¡Simplemente combinamos máscaras CSS con degradados para crear algunas formas fantásticas sin recurrir a trucos y mucho código! También probamos cuánto se necesita para lograr el equilibrio correcto de código para obtener los resultados correctos. Incluso aprendimos algunos trucos, como cambiar los valores en una o incluso media unidad. ¡CSS es súper poderoso!

Pero como comentamos, generador en línea Lo convertí en un excelente lugar para obtener el código que necesita en lugar de escribirlo a mano. Quiero decir, he pasado por todo este trabajo para descubrir cómo funciona todo, y probablemente tendré que leer este mismo artículo para recordar cómo se unió todo. Si puedes recordar todo esto, ¡bien hecho! Pero es bueno tener un generador al que volver.