Diagonale und schräge Formen in reinem CSS / SASS für schiefe Layouts

Immer gleiche Layouts sind langweilig, wie wäre es mal mit einem etwas anderem Design mit schiefen Abtrennungsbereichen? In diesem Artikel erfährst du, wie du genau das mit reinem CSS bewerkstelligt.

Erstellt in Stylesheets, Webentwicklung am

Immer gleiche Layouts sind langweilig. Wie wäre es mal mit einem etwas anderen Design mit schiefen Formen? Vielleicht benötigst du auch aus einem anderen Grund diagonale Abtrenungsbereiche. Warum auch immer du das benötigst, erreichen kannst du dies mit reinem CSS, ganz ohne JavaScript.

Ich habe selber nach einer eleganten Lösung gesucht und bin dabei auf folgendes Beispiel von Matt Coughlin gestoßen. Damit die Linien auch in beliebige andere Richtungen möglich sind und die Höhe und Breite beliebig angepasst werden kann, habe ich sein Beispiel noch erweitert:

CSS Version

/**
 * Draw a diagonal shape, e.g. as diagonal segregation
 * 
 * @author: Matt Coughlin, Pascal Garber
 *
 * @param $color: The color of the shape, default #d71f55
 * @param $direction:
 *  bl-to-tr for bottom-left to top right
 *  tr-to-bl for top-right to bottom left
 *  tl-to-br for top-left to bottom right
 *  br-to-tl for bottom-right to top left
 * @param $height: The height of the shape, default 100px
 * @param $width: The width of the shape, default 100vw
 * @param $color: The color of the shape, default #d71f55
 *
 * @see also: http://stackoverflow.com/a/11074735/1465919
 */
.diagonal-shape.bl-to-tr {
  height: 0;
  border-style: solid;
  border-width: 0 0 100px 100vw;
  border-color: transparent #d71f55 #d71f55 transparent;
}
.diagonal-shape.tr-to-bl {
  height: 0;
  border-style: solid;
  border-width: 100px 100vw 0 0;
  border-color: #d71f55 transparent transparent #d71f55;
}
.diagonal-shape.tl-to-br {
  height: 0;
  border-style: solid;
  border-width: 0 100vw 100px 0;
  border-color: transparent transparent #d71f55 #d71f55;
}
.diagonal-shape.br-to-tl {
  height: 0;
  border-style: solid;
  border-width: 100px 0 0 100vw;
  border-color: #d71f55 #d71f55 transparent transparent;
}

HTML

Die CSS-Klassen können wie folgt genutzt werden:

<div class="diagonal-shape bl-to-tr"></div>
<div class="diagonal-shape tr-to-bl"></div>
<div class="diagonal-shape tl-to-br"></div>
<div class="diagonal-shape br-to-tl"></div>

Die Klassen bl-to-tr, tr-to-bl, tl-to-br und br-to-tl stehen für:

  • bl-to-tr - bottom-left to top right also unten-links nach oben-rechts
  • tr-to-bl - top-right to bottom left also oben-rechts nach unten-rechts
  • tl-to-br - top-left to bottom right also oben-links nach unten-rechts
  • br-to-tl - bottom-right to top left also unten-rechts nach oben-links

Das Resultat sieht wie folgt aus:

Mit Inhalt könnte das so aussehen:

SASS Version

/**
 * Draw a diagonal shape, e.g. as diagonal segregation
 * 
 * @author: Matt Coughlin, Pascal Garber
 *
 * @param $color: The color of the shape, default #d71f55
 * @param $direction:
 *  bl-to-tr for bottom-left to top right
 *  tr-to-bl for top-right to bottom left
 *  tl-to-br for top-left to bottom right
 *  br-to-tl for bottom-right to top left
 * @param $height: The height of the shape, default 100px
 * @param $width: The width of the shape, default 100vw
 * @param $color: The color of the shape, default #d71f55
 *
 * @see also: http://stackoverflow.com/a/11074735/1465919
 */
@mixin diagonal-shape($color: #d71f55, $direction: 'bl-to-tr', $height: 100px, $width: 100vw) {
    height: 0;
    border-style: solid;

    @if $direction == 'bl-to-tr' {
        border-width: 0 0 $height $width;
        border-color: transparent $color $color transparent;
    } @else if $direction == 'tr-to-bl' {
        border-width: $height $width 0 0;
        border-color: $color transparent transparent $color;
    } @else if $direction == 'tl-to-br' {
        border-width: 0 $width $height 0;
        border-color: transparent  transparent $color $color;
    } @else if $direction == 'br-to-tl' {
        border-width: $height 0 0 $width;
        border-color: $color $color transparent  transparent ;
    }
}

.diagonal-shape {
    &.bl-to-tr {
        @include diagonal-shape(#d71f55, 'bl-to-tr');
    }
    &.tr-to-bl {
        @include diagonal-shape(#d71f55, 'tr-to-bl');
    }
    &.tl-to-br {
        @include diagonal-shape(#d71f55, 'tl-to-br');
    }
    &.br-to-tl {
        @include diagonal-shape(#d71f55, 'br-to-tl');
    }
}

In der SASS-Version kannst du das Mixin verwenden, um die Diagonale wie folgt deinen wünschen in Farbe, Richtung, Breite und Größe anzupassen, sowieo einer beliebigen Klasse hinzuzufügen:

.deine-klasse {
    @include diagonal-shape($color, $direction, $height, $width);
}

Ich hoffe, das wird einigen von euch nützlich sein.

Newsletter

Melde dich für unseren Newsletter an

Impressum

JumpLink network logo

Angaben gem. § 5 TMG

Betreiber und Kontakt
Pascal Garber
Kasernenstraße 8
27472 Cuxhaven DE

Telefon
+49 152 54 09 01 89
Fax
+49 4721­ 664319
E-Mail
info@jumplink.eu
USt-IdNr.
DE277453808

Verantwortliche/r i.S.d. § 55 Abs. 2 RStV
Pascal Garber, Bei der Kirche 12, 27476 Cuxhaven
JumpLink

JumpLink ist ein Netzwerk aus selbstständigen Designern und Programmierern.

Datenschutz
Die Datenschutzerklärung findest Du unter https://jumplink.eu/privacy

Online-Streitbeilegung gemäß Art. 14 Abs. 1 ODR-VO
Die Europäische Kommission stellt eine Plattform zur Online-Streitbeilegung (OS) bereit: https://ec.europa.eu/consumers/odr/.
Wir sind zur Teilnahme an einem Streitbeilegungsverfahren vor einer Verbraucherschlichtungsstelle weder verpflichtet noch bereit.

Mitglied der Initiative "Fairness im Handel".
Informationen zur Initiative: fairness-im-handel.de