Crear una curva sobre un fondo

En el ámbito del desarrollo web, los diseñadores a menudo se encuentran con la necesidad de crear curvas con fines estéticos. . Uno de esos escenarios implica colocar una curva recortada encima de un fondo, en lugar de a la derecha.

Para lograr esto, es necesario modificar el código CSS existente para ajustar la posición y la forma de la curva. Así es como se hace:

1. Ajustar la posición de los pseudoelementos:

   • Cambiar la posición de los pseudoelementos (.box: antes y .box:después) hasta abajo:100%. Esto los desplazará a la parte inferior del cuadro .box del elemento principal.

2. Modificar dimensiones del pseudoelemento:

   • Establezca la altura de los pseudoelementos en un valor específico (por ejemplo, 80 px) para controlar la altura de la curva.
   • Ajuste el ancho de los pseudoelementos al 50% para que cubran la mitad del ancho del .box .

3. Modificación del fondo degradado:

   • Modifica los fondos degradados radiales de .box:before y .box:after para crear la forma curva deseada. La técnica consiste en crear dos degradados con diferentes colores y colocarlos en los ángulos de curva deseados.

4. Pseudoelemento transformado y escalado:

   • Aplica transform:scaleX(-1) a .box:after para girarlo horizontalmente. Esto creará el efecto de espejo de la curva.

Si sigue estos pasos, podrá crear con éxito una curva sobre un fondo y lograr el efecto de recorte deseado.