2

Gostaria de saber se é possível criar o efeito da imagem abaixo usando CSS. Fazer o degradê é tranquilo, mas estou com dificuldades de fazer as ondulações.

#teste {
  width: 100%;
  height: 300px;
  background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<div id="teste">
    <p class="text-white">Meu Conteúdo vai aqui</p>
</div>

inserir a descrição da imagem aqui

1 Resposta 1

2

Tem duas formas de fazer, uma com ClipPath 100% com CSS, e outra usando SVG, mas o SVG pode ser direto dentro do HTML como eu fiz no exemplo. Se vc quiser pode usar base64 tb, mas acho que não vale a pena...

Exemplo com clip-path (site para vc fazer seu path, o meu ficou meio grosseiro mas é só um exemplo. https://bennettfeely.com/clippy/) Quanto mais pontos, mais fluida vão ser as curvas, como eu usei poucos pontos as curvas ficaram grosseiras como falei.

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
}
body {
    background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
}
.footer {
    width: 100%;
    height: 100vh;
    position: absolute;
    bottom: 0;
    left: 0;
    -webkit-clip-path: polygon(41% 54%, 53% 64%, 66% 60%, 89% 59%, 100% 73%, 100% 100%, 0 100%, 0% 70%, 10% 58%, 24% 51%);
    clip-path: polygon(41% 54%, 53% 64%, 66% 60%, 89% 59%, 100% 73%, 100% 100%, 0 100%, 0% 70%, 10% 58%, 24% 51%);
    background-color: #ffffff;
}
<div class="footer"></div>


Exemplo com SVG.

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
}
body {
    background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
}
.footer {
    width: 100%;
    height:50vh;
    position: absolute;
    bottom: 0;
    left: 0;
    fill: #ffffff;
}
    
<div class="footer">
        <svg viewBox="0 0 869 344" xmlns="http://www.w3.org/2000/svg">
            <path d="M 272 0.0130308C 164.8 1.21303 46 85.1797 0 127.013L 0 342.013L 867 342.013L 867 6.51303C 779 0.013031 684.5 127.013 616.5 127.013C 548.5 127.013 406 -1.48697 272 0.0130308Z"/>
        </svg>
</div>

O SVG tb não ficou perfeito, mas é só pra exemplo mesmo! Site para vc fazer seus SVG figma.com

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .