Jak vytvořit šikmé hrany s CSS
V tomto příspěvku se podíváme na to, jak můžeme vytvořit efekt úhlu hrany (vodorovně) na webové stránce. V podstatě to vypadá takto:
Mít mírně zahnutý okraj by měl náš web layout vypadat méně tuhé a nudné. K tomuto triku budeme používat pseudo-elementy ::před a ::po a CSS3 Transformace.
Použití Pseudo elementů
Tato technika používá pseudo-elementy ::před a ::po úhel hran prvku. V tomto příkladu budeme upravovat spodní okraj.
.block výška: 400px; šířka: 100%; poloha: relativní; pozadí: lineární gradient (vpravo, rgba (241,231,103,1) 0%, rgba (254,182,69,1) 100%); .block :: po content: "; šířka: 100%; výška: 100%; pozice: absolutní; pozadí: dědit; z-index: -1; dolní: 0; transformace-původ: vlevo; transformace: skewY (3deg);
Připomeňme si.
transformačního původu určuje souřadnice prvku, který chceme transformovat. Ve výše uvedeném příkladu jsme zadali vlevo dole které umístí počáteční souřadnice do levého dolního rohu bloku.
transformace: skewY (3deg); dělá ::po šikmého úhlu nebo úhlu 3 stupně. Vzhledem k tomu, že jsme určili počáteční souřadnici jako vlevo dole, zdvih vpravo dole v bloku zvyšuje 3 stupně. Pokud si vyměníme transformačního původu na vpravo dole a levý dolní roh bude místo toho zvýšen o 3 stupně.
Výsledek můžete zobrazit přidáním solidního barevného pozadí nebo gradientu.
Udělejte to jednodušší s Sass Mixin
Aby to bylo jednodušší, vytvořil jsem Sass mixin, který přidává šikmé hrany, mínus bolesti hlavy z řešení složitosti pravidel stylu. S následujícím mixinem můžete rychle specifikovat boční - levý horní, pravý horní, dolní levý nebo pravý dolní - pro zkosení.
@mixin úhel-hrana ($ pos-top: null, $ angle-top: null, $ pos-btm: null, $ angle-btm: null) width: 100%; poloha: relativní; pozadí: lineární gradient (vpravo, rgba (241,231,103,1) 0%, rgba (254,182,69,1) 100%); & :: before, & :: after content: "; šířka: 100%; výška: 100%; pozice: absolutní; pozadí: dědit; z-index: -1; přechod: snadné všechny .5s; @if $ pos-top & :: before @if $ pos-top == 'topleft' top: 0; transform-origin: right top; transform: skewY ($ angle-top); @if $ pos-top = = 'topright' top: 0; transform-origin: left top; transform: skewY (- $ angle-top); @if $ pos-btm & :: po @if $ pos-btm == 'bottomleft' bottom: 0; transform-origin: right bottom; transform: skewY (- $ angle-btm); @if $ pos-btm == 'bottomright' bottom: 0; transform-origin: vlevo dole; transform: skewY ($ angle-btm);
V mixinu jsou čtyři proměnné. První dvě proměnné, $ pos-top a $ angle-top, specifikujte horní startovní souřadnice a stupeň. Poslední dvě proměnné určují koordinovat a stupeň pro dno boční.
Pokud vyplníte všechny čtyři proměnné, můžete obě strany - horní a dolní - naklonit.
Použijte Sass @zahrnout syntaxi pro vložení mixinu do elementu. Příklady naleznete níže:
Chcete-li přidat šikmou hranu vlevo nahoře boční:
.block @include edge (topleft, 3deg);
Chcete-li přidat šikmou hranu vpravo dole boční:
.block @include edge (bottomright, 3deg);
Chcete-li přidat šikmou hranu vlevo nahoře a vpravo dole boční:
.block @include edge (topleft, 3deg, bottomright, 3deg);
Níže je ukázka s použitými mixiny. Změňte výběrové pole na jiný styl.
A je to!
