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 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.