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.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
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