Ainda não tem acesso? Estude com a gente! Matricule-se
Ainda não tem acesso? Estude com a gente! Matricule-se

Solucionado (ver solução)

Efeito em imagem

Bom dia,

Gostaria de saber como posso fazer esse efeito nessa imagem:

https://drive.google.com/file/d/1eB0HDRGPT_T6sbcw7mZvuzG2rXBomqUZ/view?usp=sharing

o efeito e o do fim da imagem q tem esse corte em forma de triangulo, tentei com pseudo elemento mas nao é isso.

obrigado.

4 respostas

Oi Gabriel, como vai?

Eu faria exatamente com pseudoelementos esse efeito.

Como voce fez?

Abcs!

Então Natan, o que eu entendo pelo pseudoelemento, ele fica pra na borda do seu elemento não seria isso?

Essa imagem é meu background-image da minha div header:

.container-header{
    height: 48em;
    width: 100%;
    margin-bottom: 10em;
    padding-top: 1em;
    background-image: url(../img/esocial-techne-header_01.png);
    height: 44em;
}

se eu fizer um pseudoelemento dessa forma e deixa o background-color transparent o fundo vai ser branco pois o pseudoelemento vai estar ja fora do meu header.

Estou utilizando o pseudoelemento de foram errada?

solução

Oi Gabriel,

O pseudoelemento eh um elemento criado via css que fica DENTRO do elemento que foi atrelado. Voce pode ver isso dando botao direito inspecionar elemento no elemento e ver que o after e o before ficam ali dentro, antes ou depois do conteudo desse elemento em si.

Implementei a proposta aqui nesse Jsbin para voce dar uma olhada.

Normalmente pessoal faz setinhas assim tambem.

Abcs!

Natan muito obrigado muito didático seu exemplo.