me encontré Consejos del rincón de Kitty Giraudel. Utiliza CSS clip-pathCreo que este es un enfoque genial. clip-path Ha sido muy popular recientemente, probablemente porque los navegadores web admiten shape() Corre ahora.
Sin embargo, he estado un poco corner-shape Recientemente pateado (mira mi Introducción corner-shape y estos unidad de desplazamiento corner-shape animación), así que pensé corner-shape También se puede utilizar para crear esquinas dobladas, esto es lo que se me ocurrió:
Así que abre Chrome, es compatible corner-shapeprofundicemos (si estás viendo esto en otro navegador, básicamente vuelve a las esquinas redondeadas).
Paso 1: establece algunas variables CSS
El elemento tiene cuatro esquinas, pero cuando usamos border-radiuscada esquina se divide en dos coordenadas. La coordenada del eje x se mueve a lo largo del eje x alejándose de su ángulo asociado, mientras que la coordenada del eje y hace lo mismo a lo largo del eje y. Se puede ver en estas coordenadas. border-radius Dibuja la curvatura del filete.
Primero, almacene las coordenadas como variables CSS. Necesitaremos sus valores guardados varias veces, por lo que esto simplifica las cosas, anima los pliegues y mantiene un nivel de realismo.
:root {
/* x-axis coordinate */
--x-coord: 9rem;
/* y-axis coordinate */
--y-coord: 5rem;
}Paso 2: crea el pliegue
Dado lo que ahora sabemos border-radiusdebería ser obvio qué border-top-right-radius Hacer. Para corner-top-right-shape: bevello que garantiza que se dibujen líneas rectas entre las coordenadas en lugar de esquinas redondeadas (corner-top-right-shape: round). así es, border-radius incluir corner-shape: round Por defecto (detrás de escena, por supuesto).
/* Square */
div {
/* Place coordinates */
border-top-right-radius: var(--x-coord) var(--y-coord);
/* Draw line between coordinates */
corner-top-right-shape: bevel;
}
Paso tres: crea lo opuesto
Ahora que tenemos el pliegue establecido, es hora de crear el otro lado. Primero seleccione ::beforey luego declarar content: "" Crea elementos sin contenido. este background se puede heredar del cuadrado y las dimensiones deben utilizar nuestras coordenadas guardadas. Como puedes ver, también agregué un box-shadow Radio de desenfoque y --x-coord y --y-coordpero puedes ajustar la fórmula según sea necesario.
/* Square */
div {
/* Place coordinates */
border-top-right-radius: var(--x-coord) var(--y-coord);
/* Draw line between coordinates */
corner-top-right-shape: bevel;
/* Flip side */
&::before {
/* Generate empty element */
content: "";
/* Inherit background */
background: inherit;
/* Same as coordinates */
width: var(--x-coord);
height: var(--y-coord);
/* Scale blur radius with --x-coord and --y-coord */
box-shadow: 0 0 calc((var(--x-coord) + var(--y-coord)) / 3) #00000050;
}
}
Paso 4: Coloque el reverso (::before)
A continuación necesitamos transferir ::before a (esquina superior derecha). estamos escapando posicionamiento del anclaporque las funciones modernas no son necesarias si más funciones compatibles funcionan bien con la misma cantidad de código. Entonces, declara position: relative en la plaza y position: absolute existir ::before. Esto hace ::before Posición relativa al cuadrado y es un truco que solo funciona en las relaciones entre padres e hijos. De hecho, este inconveniente es la razón por la que se inventó el anclaje, pero en este caso simplemente no lo necesitamos.
Además, la declaración inset: 0 0 auto auto existir ::before Alinéelo con la esquina superior derecha del cuadrado y overflow: clip en la plaza cortar la mitad ::before Eso lo desbordó.
/* Square */
div {
/* Place coordinates */
border-top-right-radius: var(--x-coord) var(--y-coord);
/* Draw line between coordinates */
corner-top-right-shape: bevel;
/* Clip any overflow */
overflow: clip;
/* For alignment */
position: relative;
/* Flip side */
&::before {
/* Generate empty element */
content: "";
/* Inherit background */
background: inherit;
/* Same as coordinates */
width: var(--x-coord);
height: var(--y-coord);
/* Scale blur radius with --x-coord and --y-coord */
box-shadow: 0 0 calc((var(--x-coord) + var(--y-coord)) / 3) #00000050;
/* For alignment */
position: absolute;
/* Align to top-right */
inset: 0 0 auto auto;
}
}
Puedes parar aquí si quieres, pero hay margen de mejora…
Paso 5: talla el otro lado
Para que el resultado parezca un poco más realista, usaremos corner-bottom-left-shape: bevel Haz otro corte recto, esta vez. ::before. Probablemente hay muchas maneras de hacer esto, dependiendo de qué tan nítido queremos que sea el pliegue, qué tan alto queremos que sea el reverso y el ángulo en el que queremos ver el cuadrado, pero creo que en realidad no importa siempre y cuando el efecto se vea bien, por lo que nuestro objetivo es un pliegue nítido, una prominencia invertida hacia arriba y una vista de pájaro. Si quieres algo diferente, recuerda que las sombras también afectarán los resultados y te enfrentarás a una implementación más complicada.
El único nivel de complejidad que recomendaría es:
/* Ensure realistic fold */
@container style(--x-coord < --y-coord) {
border-bottom-left-radius: 100% calc(100% - var(--x-coord));
}
@container style(--x-coord >= --y-coord) {
border-bottom-left-radius: calc(100% - var(--y-coord)) 100%;
}Estos son Consulta de estilo de contenedor usando sintaxis de rangodonde si el valor --x-coord valor menor que --y-coordel valor que restamos --x-coord de 100% y utilícelo como la coordenada del eje y del radio límite relevante (border-bottom-left-radiusen este caso). El otro eje se fija en 100%. Por el contrario, si --x-coord Sí más Un valor que es mayor que (o igual a) --y-coordel valor que restamos --y-coord de 100% y utilícelo como coordenada del eje x. De nuevo ajuste el otro eje a 100%.
El resultado son pliegues, sombras y ahora vista El plegado se calcula utilizando únicamente --x-coord y --y-coord Parece realista (o bastante realista, al menos). usar variable deslizante Puede comprobar usted mismo la demostración del interruptor de palanca en la esquina superior derecha probando varias combinaciones de coordenadas:
Si desea implementar un mecanismo de seguridad para garantizar que las coordenadas no excedan las dimensiones del cuadrado, arruinando el efecto, puede usar min(). La configuración de las variables de coordenadas modificadas es la siguiente --y-coord a un imposible 999999999rempero limítelo a la altura del cuadrado (aunque, para ser honesto, no puedo imaginar que realmente necesite esto):
--x-coord: min(--square-width, 9rem);
--y-coord: min(--square-height, 999999999rem);En definitiva, no sólo tenemos un efecto de esquina plegada, sino también una utilidad que construye el efecto basándose en sólo dos coordenadas.
Código completo:
:root {
/* x-axis coordinate */
--x-coord: 9rem;
/* y-axis coordinate */
--y-coord: 5rem;
/* Square */
div {
/* Place coordinates */
border-top-right-radius: var(--x-coord) var(--y-coord);
/* Draw line between coordinates */
corner-top-right-shape: bevel;
/* Clip any overflow */
overflow: clip;
/* For alignment */
position: relative;
/* Flip side */
&::before {
/* Generate empty element */
content: "";
/* Inherit background */
background: inherit;
/* Same as coordinates */
width: var(--x-coord);
height: var(--y-coord);
/* Scale blur radius with --x-coord and --y-coord */
box-shadow: 0 0 calc((var(--x-coord) + var(--y-coord)) / 3) #00000050;
/* For alignment */
position: absolute;
/* Align to top-right */
inset: 0 0 auto auto;
/* Draw line between coordinates */
corner-bottom-left-shape: bevel;
/* Ensure realistic fold */
@container style(--x-coord < --y-coord) {
border-bottom-left-radius: 100% calc(100% - var(--x-coord));
}
@container style(--x-coord >= --y-coord) {
border-bottom-left-radius: calc(100% - var(--y-coord)) 100%;
}
}
}
}notas: podemos Consulta de estilo de contenedor de Exchange if() Funciónson más cortos pero menos legibles.
Utilice esquinas plegables clip-path y corner-shape
Girodele de Kitty con orejas de perro Funciona en todos los navegadores y porque clip-path Use, que es una función de modelado más versátil con más formas de personalizar la forma. Por si sirve de algo, también es el enfoque más correcto. Sin embargo, mi corner-shape El método es más simple y puede que no requiera ninguna personalización adicional, pero actualmente carece de compatibilidad con Safari y Firefox. Entonces, a menos que necesites doblar esquinas hoy, agregaría ambos a favoritos:
