Diagonale Content Bereiche - wie in RapidWeaver einfach umsetzen?

Ich will zwei übereinander liegende Bereich voneinander trennen - und zwar so, dass diese Bereiche eine diagonal verlaufende Trennungslinie haben. Sicher könnte ich das mit transparenten Grafiken lösen, aber das muss auch mit CSS gehen

Gibt es dafür irgendwo eine Stack-Lösung? Ich bin bislang nicht fündig geworden

Mal bisschen genauer bitte :slight_smile: Hast du ein Bild?

Also so etwas z.B.:

1 Like

und wenn du eine Linie als Grafik png einsetzt und diese drehst?

oder solche linien find ich auch schön:

hr style=“border: 0; height: 1px; background-image: -webkit-linear-gradient(left, rgba(181,42,21,0), rgba(181,42,21,1), rgba(181,42,21,0)); background-image: -moz-linear-gradient(left, rgba(181,42,21,0), rgba(181,42,21,1), rgba(181,42,21,0)); background-image: -ms-linear-gradient(left, rgba(181,42,21,0), rgba(181,42,21,1), rgba(181,42,21,0)); background-image: -o-linear-gradient(left, rgba(181,42,21,0), rgba(181,42,21,1), rgba(181,42,21,0));”

alles in <> setzen

und mit diesem Befehl dazu kannst auch drehen: transform: rotate(30deg);
ich probiere es gleich mal ohne Verlauf…

Danke, aber das ist es nicht, was ich suche. Grafik ist klar, kann man so machen. Und für den Code gibt es diverse Generatoren im Web. Grafik ist unelegant und Code ist umständlich

Ich suche die Einfachlösung per Stack…

Wenn ich das CSS coding für die 2 Bilder bekomme, kann ich relativ schnell einen Stack daraus machen…

ok weiß nicht ob man die auch drehen kann… würde es mit einer Liniengrafik machen

Nee keine Grafik. Das ist unelegant bzw. liesse sich ja mit den vorhandenen Stacklösungen unkompliziert umsetzen. Ich will eine CSS-Lösung via Stack. Erstellt habe ich mir mit einem Generator jetzt mal als Beispiel diesen Code:

HTML:

<div class="obererbereich">
  &nbsp;
</div>
<div id="untererbereich">
  <div class="wrapper">
</div>

CSS:

* {
  -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
    body {
      margin:0;
    }
    .obererbereich {
      background-color:#003a6f;
      height:600px;
      width:100%;
      background-size:cover;
      position:relative;
      z-index:-1;
    }
    #untererbereich .wrapper {
      display:block;
      float:left;
      margin:50px auto 200px;
      width:100%;
      padding:0 5%;
      transform:skew(0deg,-5deg);
    -ms-transform:skew(0deg,-10deg);
    -webkit-transform:skew(0deg,-5deg); 
    }
    #untererbereich {
      z-index:1;
      display:block;
      float:left;
      margin-top:-100px;
      width:100%;
      background:white;
      transform:skew(0deg,10deg);
    -ms-transform:skew(0deg,10deg); /* IE 9 */
    -webkit-transform:skew(0deg,5deg); /* Safari and Chrome */
    }

Und etwas vergleichbares sollte ein Stack können.

@webJan: Lines lässt sich leider nicht rotieren. Ich habe eigentlich so gut wie nichts gefunden, was sich rotieren lässt und für mein Vorhaben geeignet wäre

schade…
hier:

Mit svg kannst du die Pixel direkt angeben, da kannst du die Schräge besser steuern. Aber möchtest ja keinen code… weitere Stacks kenne ich nicht

passt noch nicht ganz im unteren Bereich, bottom ist auch schräg (mal weiß mit rot getauscht).

Stimmt, aber da könnte man mit einer weiteren Box lösen, die nicht rotiert und über den unteren Bereich gelegt wird. Wobei “elegant” was anderes ist…

Leider funktioniert eine selektive Vorgabe für die Rotation von Top und Bottom nicht, es wird immer nur die komplette Box rotiert. Im Moment weiß ich keine Lösung dafür.

Ich würde so etwas mit Sections lösen. Wenn ich das richtig verstanden habe. :slight_smile:
https://infinit.io/_/HupEer5

2 Likes

Das ist eine gute Idee. Danke.

Hatte dieser Tage schon mal mit Sections experimentiert, bin aber nicht weiter gekommen. Hab einfach die Möglichkeiten nicht gesehen. Manchmal haben Stacks einfach zu viele Möglichkeiten…

Gerade die Sections Stacks sind genial, aber auch schon ziemlich komplex.

Vielleicht dieser stack
http://weaverthings.rapidweavercentral.info/diagonalthing/

Nee, der macht was ganz anders. Der bildet ein zweiteiliges Panel, das eine schräge Trennung hat und ins obere Teil geht nur eine Bilddatei. Sections war schon genau das richtige