2
respostas

Como fazer um processo em css

Estou mexendo em um site e quero saber o que posso usar no css, para fazer o exemplo da imagem no print abaixo:

http://prntscr.com/iud2vf

Preciso colocar esse "efeito" da imagem começando de uma forma menor e subindo.

Deste já agradeço a ajuda.

2 respostas

Oi Shellen,

Dá para fazer parecido com o utilizado nesse site que você mandou o print:

.fundo {
    /* a div externa deve definir a cor de fundo e o position como relative */
    background-color: lightskyblue;
    position: relative;

    /* margin e padding aqui sao opcionais e foram apenas pra descer um pouco a div */
    margin-top: 100px;
    padding: 10px;
}

/* no :after da div é que estara o efeito de "subidinha" do background */
.fundo:after {
    /* propriedades para que o :after apareca no browser */
    content: '';
    display: block;
    width: 100%;
    height: 100%;

    /* efeito para fazer a subidinha do background */
    transform: skewY(-2deg);
    transform-origin: 0 100%;

    /* controlando o posicionamento do efeito da subidinha */
    position: absolute;
    top: 0;
    right: 0;

    /* herda o background da div, senao a subidinha nao tera cor e nao aparecera no browser*/
    background-color: inherit;

    /* z-index negativo, para que os elementos dentro da div nao sejam cobertos pelo background */
    z-index: -1;
}
<div class="fundo">
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Doloribus, ut. Illo vel iste maiores doloremque iusto sit ducimus?</p>
</div>

Bons estudos!

Olá primeiramente obrigada pelo retorno, você sabe me falar como faria este processo no site:

https://www.metroredondo.com.br/nova-home

Na parte do print http://prntscr.com/iviebb e este também http://prntscr.com/iviejg

Preciso deixar assim: http://prntscr.com/iviex1