Estou mexendo em um site e quero saber o que posso usar no css, para fazer o exemplo da imagem no print abaixo:
Preciso colocar esse "efeito" da imagem começando de uma forma menor e subindo.
Deste já agradeço a ajuda.
Estou mexendo em um site e quero saber o que posso usar no css, para fazer o exemplo da imagem no print abaixo:
Preciso colocar esse "efeito" da imagem começando de uma forma menor e subindo.
Deste já agradeço a ajuda.
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