Divs no rectangulares

Ngel · #1 (**permalink**) 05/12/2013, 23:57

Saludos a todos, es mi primer post.

Soy principiante y casi autodidacta en esto, es mi primera pagina.

Y bueno... al lio!

Quiero hacer una banda de lado al lado de la pagina con tres Divs contiguos para insertar unas fotos, pero que no sean rectangulares; el de el medio con forma de trapecio y los de los de los lados trapezoidales.

La única info que he encontrado en San Google es la misma siempre, aquí un ejemplo de ella:
http://css-tricks.com/examples/ShapesOfCSS/

Y bueno lo he conseguido aparentemente, pero no consigo insertar las fotos dentro de los Divs, se colocan debajo.

Supongo que la manera correcta seria con un Z-index a la foto dentro del Div pero.... no.

Añadir que luego le daría un Overflow Hidden para respetar la forma del trapecio en la foto.

Otro problema es que al ir reduciendo horizontalmente la pagina los Divs se superponen (que es lo que quiero) pero llega un momento que el tercer Div se baja de posición debajo de los dos primeros.

Aquí os dejo el código, no esta separada la hoja de Html del Css por que me resulta mas cómodo para ir probando con el Notepad++, no tener que cambiar de una a otra constantemente, mas adelante...

Solo es un boceto (luego iré añadiendo elementos) supongo que hasta habrá algo que este mal o se pueda mejorar, acepto todo tipo de sugerencias, indicaciones e imposiciones...

Os dejo tambien una foto de lo que quiero conseguir:
http://www.subeimagenes.com/img/intro-790470.html

Lo siento no se por que no consigo que funcionen los enlaces.

Gracias.

Código HTML:

<!doctype html>
<html lang="es">
	<head>
		<meta charset="utf-8">
		<title>INTRO</title>
		<link rel="shortcut icon" type="image/x-icon" href="images/favicon.png">
			<style>
				#pics {
					position: absolute;
					margin-top: 200px;
					width: 100%;
					height: 338px;
					left: 0px;
					right: 0px;
				}
				#pic1 {
					left: 0px;
				
				}
				#left {
					display:inline-block;
					left: 0px;
					border-top: 338px solid silver;
					border-right: 200px solid transparent;
					height: 0;
					width: 23%;
					position: absolute;
					z-index: 2;
				}
				#cent { 
					display:inline-block;
					border-bottom: 338px solid teal;
					border-left: 200px solid transparent;
					border-right: 200px solid transparent;
					height: 0;
					width: 22.5%;
					position: relative;
					z-index: 1;
				}
				#right {
					display:inline-block;
					right: 0px;
					border-top: 338px solid silver;
					border-left: 200px solid transparent;
					height: 0;
					width: 23%;
					position: absolute;
					z-index: 3;
				}
			</style>
	</head>
	<body topmargin=0 leftmargin=0>
			<div id="pics" align="center">
				<div id="left">
					<img id="pic1" src="images/1.png">
				</div>
				<div id="cent">
					
				</div>
				<div id="right">

				</div>
			</div>
	</body>
</html>