Elegant sneda sektioner med hjälp av CSS

I detta inlägg tänkte jag visa hur man får snygga sneda kanter på en div-sektion. Jag använder div-sektioner ofta vid utveckling av one-page sidor och att snedda kanterna kan göra det även elegantare.

Här nedan är ett exempel på hur färdiga resultatet kan se ut:

Det här är divven.

Nå, till utförandet. Denna korta kod är väldigt enkel men kan boosta utseendet på din sida enormt. I exemplet nedan använder jag en helt ny sektion kallad ”snedkant” men du kan även lägga till bara ”:after” delen till ett befintligt. Lägg in följande:


.snedkant {
background: #41ade5;
position: relative;
z-index: 1;
padding-top: 15%;
padding-bottom: 15%;
padding-left: 15%;
padding-right: 15%;
margin-bottom: 15%;
}

.snedkant:after {
background: inherit;
bottom: 0;
content: '';
display: block;
height: 50%;
left: 0;
position: absolute;
right: 0;
transform: skewY(-1.5deg);
transform-origin: 100%;
z-index: -1;
}

För att sedan lägga in det i ditt inlägg använder du följande HTML-fras:

<*div class="snedkant"><*center>Det här är divven.<*/center><*/div>

KLART!

Läs gärna mina bästa tips för att snygga till Twenty Seventeen

Kommentera

E-postadressen publiceras inte. Obligatoriska fält är märkta *