Scheve elementen maken met een handige CSS border truc

Rechthoeken zijn saai. Iedereen weet hoe je rechthoeken moet maken. Het hele internet bestaat vooral uit rechthoeken. Laten we een coole parallellogram maken zoals je ziet in het hoofdmenu van deze website.

Wil je niet weten hoe en waarom? Bekijk de volledige code hier (Je kunt de pagina opslaan met Ctrl + S).

1. Maak een rechthoek

Begin eerst met het maken een saaie flexbox rechthoek.

<style>
    .main {
        display: flex;
    }

    .element {
        display: flex;
        align-items: center;
        background-color: violet;
        height: 120px;
        padding: 0 80px;
    }
</style>

<div class="main">
    <p class="element">
        Saaie rechthoek
    </p>
</div>

Je pagina ziet er nu ongeveer zo uit:

2. Voeg pseudo-elementen toe

Eerst gaan we de ::before en ::after psuedo-elementen toevoegen aan onze rechthoek. We zullen deze uiteindelijk gebruiken om de randen af te knippen en onze rechthoek een parallellogram te veranderen.

.element::before {
    content: '';
    display: block;
    height: 0;
    width: 0;
}

.element::after {
    content: '';
    display: block;
    height: 0;
    width: 0;
}

Je ziet nu nog geen verschil. Als je de pagina opent met behulp van “inspecteren”, zie je dat de pseudo-elementen zijn gemaakt, maar ze zijn nu natuurlijk nog leeg.

3. Voeg borders aan de pseudo-elementen toe en verwijder de padding.

Vervang in dit geval white door de kleur van het element dat achter je parallellogram zit.

.element::before {
    border-right: 80px solid transparent;
    border-top: 120px solid white;
    content: '';
    display: block;
    height: 0;
    width: 0;
}

.element::after {
    border-right: 80px solid white;
    border-top: 120px solid transparent;
    content: '';
    display: block;
    height: 0;
    width: 0;
}

Als je nu naar je pagina kijkt, zie je dat de rechthoek in een parallellogram begint te veranderen. Het enige wat we nu hoeven te is de padding: 0 80px; weg de halen van ons originele element.

.element {
    display: flex;
    align-items: center;
    background-color: violet;
    height: 120px;
}

En daar is het:

Maar hoe werkt het?

Wat we hier doen is de splitsing van twee borders (mis)bruiken. De top- en bottomborder hebben verschillende kleuren, dus de browser zal op dit kruispunt een diagonale scheiding weergeven.

De pseudo-elementen zelf zijn onzichtbaar omdat ze 0*0 px groot zijn, dus het enige wat we van dit element zien is het snijpunt op de hoek. We gebruiken dit als de diagonale randen van onze parellelogram.

We hebben het “zichtbare” deel van de hoek transparent gemaakt zodat je zeker weet dat de scheve hoek altijd dezelfde kleur zal hebben als je element. Het betekent ook dat je met deze truc image backgrounds of gradients kunt gebruiken.

Toevoeging:

Je kunt waarschijnlijk hetzelfde bereiken met transform: skew(), maar ik denk dat je met deze oplossing makkelijker tegen problemen aan loopt omdat je rekening moet houden met graden berekenen in plaats van pixels op een X- en Y-as, zoals met deze methode wel kan.