Criando uma curva em cima de um plano de fundo

No domínio do desenvolvimento web, os designers muitas vezes encontram a necessidade de criar curvas para fins estéticos . Um desses cenários envolve o posicionamento de uma curva de recorte no topo de um fundo, em vez de à direita.

Para conseguir isso, é necessário modificar o código CSS existente para ajustar o posicionamento e a forma da curva. Veja como isso é feito:

1. Ajuste a posição dos pseudoelementos:

   • Altere a posição dos pseudoelementos (.box: antes e .box:depois) para baixo:100%. Isso os deslocará para a parte inferior do elemento pai .box.

2. Modificar dimensões do pseudo-elemento:

   • Defina a altura dos pseudoelementos para um valor específico (por exemplo, 80px) para controlar a altura da curva.
   • Ajuste a largura dos pseudoelementos para 50% para fazê-los cobrir metade da largura do .box .

3. Modificação de fundo gradiente:

   • Modifique os fundos gradientes radiais de .box:before e .box:after para criar a forma curva desejada. A técnica envolve criar dois gradientes com cores diferentes e posicioná-los nos ângulos de curva desejados.

4. Pseudoelemento de transformação e escala:

   • Aplique transform:scaleX(-1) em .box:after para virá-lo horizontalmente. Isso criará o efeito de espelho da curva.

Seguindo essas etapas, você pode criar com êxito uma curva sobre um fundo e obter o efeito de recorte desejado.