Hi Forum,
ich habe eine Site auf der ich den oberen Bereich schwarz darstellen will. Also er verläuft von fast ganz links unten bis fast ganz rechts oben.
html:
Code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link rel="stylesheet" media="all" type="text/css" href="./css/style.css" />
</head>
<body>
<div id="wrapper">
<div id="foregrnd"></div>
</div>
</body>
</html>
css:
Code:
html, body {
margin: 0;
height: 100%;
}
body {
background-color: #fff;
}
#wrapper {
width: 100%;
height: 100%;
}
#foregrnd {
background-color: #000;
background-repeat: repeat-x;
position: absolute;
top: -30%;
left: -10%;
overflow: hidden;
height:100%;
width:120%;
-moz-transform: rotate(-15deg);
-ms-transform: rotate(-15deg);
-o-transform: rotate(-15deg);
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg);
}
Ich habe dazu die transform-Eigenschaft benutzt und es ist auch alles ganz schick, aber dass rechts eine Ecke aus dem Fenster rausragt, so dass man scrollen muss, ist nicht gewollt. Ich dachte, dass ich hier overflow: hidden; nehmen könnte, aber das funktioniert nicht. Auch wenn ich dem wrapper eine max-width: 100%; verpasse geht es nicht.
Vielleicht habt ihr ja einen Lösungsvorschlag. Danke im Vorraus.
Gruß
Karsten