Estruturar layout

[guihh25 0]

Olá,

 

Estou com um problema para definir o layout do meu site e gostaria de saber se alguém consegue me ajudar.

 

 

Parte cinza é o header e a parte vermelha seria uma imagem de background no resto do layout. O que separa o header da imagem é a linha azul que é mais ou menos nesse formato mesmo e é uma imagem também.

 

O que eu gostaria de saber é: como eu faço para o header prencher a parte cima da linha azul e a imagem a parte de baixo?

 

Caso não for possivel entender o tento explicar melhor.

 

Obrigado

[leonardo de andrade baessa 16]

bom vc teria que criar a imagen correspondente a lina azul com as cores definidadas no fundo para simplificar

criar

a div do header, uma pra img e a outra com o corpo que seria a linha vermelha.

 

estrururar cada div. com suas propriedades depois.

[Natan S. 6]

Poderia explicar melhor?

[guihh25 0]

Poderia explicar melhor?

 

Como eu faria para o header (parte cinza) seguir o contorno da imagem em azul e embaixo a imagem em vermelhor sguir o contorno também da imagem em azul?

[L. Henrique 179]

Você pode definir a estrutura do campo azul com seletores :after e :before, mas isso vai dar um baita trabalho e não vai dar muito certo pra alinhar e deixar responsivo.

A melhor maneira de simular esse efeito é trabalhando com uma imagem (.PNG) já com a forma desejada, ou em melhor caso, utilizar .SVG (Pelo menos o SVG você pode trabalhar no CSS e modificar como achar necessário).

Caso não entenda o que é o SVG, leia esse tutorial aqui: Tableless

[leonardo de andrade baessa 16]

 

Ou vc cria a imagem de background da div header com a cor já emendando no corpo ou cria a parte de baixo dela em .png e deixa transparente.