Ayuda con maquetación

B

Hola!

Tengo que maquetar un diseño web en el que me he quedado algo bloqueado, esta sería la estructura principal:

El problema lo tengo en el fondo y en el corte triangular... en principio lo puedo maquetar bien para un tamaño de ventana, pero en cuanto amplio ese tamaño de ventana es cuando tengo el problema.

Si la ventana se amplia hacia abajo me gustaría que siguiera la diagonal.

No sé si es una tontería que no consigo ver o si no tiene tanta complicación, pero me estoy quedando bastante bloqueado y no sé como maquetarla correctamente y que se vea lo mejor posible en distintos formatos pantalla, a ver si alguien me puede dar algún consejo.

La solución que había hecho:

La imagen del triángulo blanco tiene fondo transparente para que se vea el BG de fondo...

Al ampliar la ventana hacia abajo dejaba un corte limpio, que no era un gran problema, pero en iPhone e iPad me corta raramente el triangulo a mitad por la derecha y muestra color negro derrepente por lo cual no me sirve.

A ver si alguien me puede echar una mano :)
Gracias!

JuSt1

Para que vas a poner el div Contenido a la izquierda del todo? seria centrarlo y cambiarle la imagen de fondo, que es muy basta para mi.

catalon

No digo nada, habia leido mal.

B

El diseño no lo puedo cambiar, es ese, y así tiene que ser...

Además, lógicamente, he puesto una imagen falsa para el ejemplo xD

La cosa es conseguir esa estructura correctamente y que se vea lo más mejor posible en iPhone/iPad incluidos...

bLaKnI

Tan fácil como hacer la web dinámica (líquida) y no darle fondo al div de la izquierda, simplemente que esté superpuesto.
Así no maquetas nada mas, es tal cual es.

Usuarios habituales