Ist das mit Hilfe von CSS möglich?

dn3d_fanboy · 26.10.2015

Guten morgen zusammen,
ich beiße mir gerade an einem Problem die Zähne aus. Per Google konnte ich bisher auch noch nichts passendes finden, also versuche ich hier mal mein Glück.

Ziel ist es, eine Seite wie im Bild () umzusetzen. Dabei sollten die beiden Bereiche (grün und blau) jeweils eigenständige DIVs sein, die eine Breite von 50% und eine Höhe von 100% haben. Soweit, so gut. Das bekomme ich auch problemlos umgesetzt.

Worum es mir jetzt geht sind die Schrägen der beiden Bereiche und die Rahmen in der Mitte. Ist das mit CSS überhaupt machbar? Ich hatte erst an Skew gedacht, da habe ich dann aber das Problem, dass seitlich immer etwas überhängen würde. Zwar kann mit :after und :before eine Schräge an die DIVs "gepappt" werden, hier hätte ich aber das Problem, das a) die Hintergründe nicht nahtlos, bzw. bei den Schrägen nicht möglich wären und b) die Schrägen eine Hitergrundfarbe hätten, so dass ich da auch nichts überlappen könnte.

Hat vielleicht von euch jemand eine Idee (vielleicht auch Javascript, falls CSS der falsche Weg ist), wie ich es dennoch umgesetzt bekommen könnte.

Ich würde mich über Hilfe und Tipps sehr freuen.

Besten Dank im Voraus.

[EDIT]: die grauen Bereicht könnt ihr ignorieren. ;-)

Helpstar24 · 26.10.2015

Klar. Du setzt die Bilder auf opacity: 0.7 (Dann überschneiden sich die Bilder in der mitte und es entsteht ein Rahmen. Die Bilder mit CSS3 leicht neigen.

HTML:

<!DOCTYPE html>
<html lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<style>
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}
body  {overflow-x:hidden}
#box1  {width:56%; height:100%; left:-5%; background-color:green; position:absolute; opacity:0.7}
#box2  {width:56%; height:100%; right:-5%; background-color:blue; position:absolute; opacity:0.7}

#box2 {-webkit-transform: skew(-7deg);
-moz-transform: skew(-7deg);
-ms-transform: skew(-7deg);
-o-transform: skew(-7deg);
transform: skew(-7deg);}

#box1 {-webkit-transform: skew(-7deg);
-moz-transform: skew(-7deg);
-ms-transform: skew(-7deg);
-o-transform: skew(-7deg);
transform: skew(-7deg);}

</style>
<title>Deine Homepage</title>
</head>
<body>

<div id="box1"></div>
<div id="box2"></div>
</body>

</html>