CSS com recortes e máscaras.

[allefbr]

E ai galera,

Estou com o seguinte problema, preciso implementar o layout abaixo:

O meu maior problema é fazer o recorte da mulher, de modo que recorte embaixo, mas não recorte em cima.

É possível fazer isso com CSS sem precisar manipular a imagem?

[zemariobandeira]

Você pode tentar utilizar uma máscara personalizada.
Dê uma olhada nesse link: https://css-tricks.com/clipping-masking-css/
Pode ser que te ajude

[allefbr]

@MarioDKR quando estava pesquisando tinha visto esse link, porém o problema é como deixa o topo da cabela para fora do circulo, acho que não tem como fazer isso só com uma imagem dentro de uma forma.

[rubenmarcus]

vc pode ter a mulher num png transparente, e os elementos de fundo, feitos em css.. (e os por cima dela também)

[kvnol]

Eu faria exatamente o que o @rubenmarcus disse.

[allefbr]

@rubenmarcus é uma solução, porém sempre vou ter que cortar a parte de baixo da imagem no photoshop e enviar, farei assim mesmo. já que querendo ou não precisara enviar a imagem em PNG pro sistema.

Obrigado a todos 👍

[gnbezerra]

@allefbr a imagem da mulher já está com o fundo transparente, né?

Eu também faria cortando a imagem da pessoa no photoshop (se não forem dezenas dessas), mas eu tava convencido de que tinha uma forma de fazer com CSS, quase sempre tem! Aí resolvi botar a mão na massa pra descobrir e consegui.

Uma forma de fazer é com clip-path usando um SVG customizado como formato do recorte, conforme já é mostrado no link do @MarioDKR. No caso, seria um SVG com um formato arredondado embaixo e retangular em cima (tipo um retângulo com as bordas de baixo arredondadas, algo assim). Aí o círculo colorido fica no fundo como outro elemento.

Fiz um exemplo no Codepen de como ficaria: https://codepen.io/gnbezerra/pen/MvRELy

Na esquerda tá o resultado e na direita uma representação do SVG usado como recorte.

[allefbr]

@gnbezerra WoW, ficou muito show.

E a solução estava na minha cara o tempo todo, só não estava conseguindo visualizar o recorte.

Obrigado.