Jak tworzyć krzywe z CSS
W tym poście przyjrzymy się, jak możemy utworzyć kątowy efekt krawędziowy (poziomo) na stronie internetowej. Zasadniczo wygląda to mniej więcej tak:
Lekko nachylona krawędź powinna wyglądać mniej sztywnie i nudno. Aby to zrobić, użyjemy pseudoelementy ::przed i ::po i CSS3 Przekształć.
Korzystanie z Pseudo Elements
Ta technika wykorzystuje pseudoelementy ::przed i ::po kątować krawędzie elementu. W tym przykładzie dostosujemy dolną krawędź.
.blok wysokość: 400px; szerokość: 100%; pozycja: względna; tło: gradient liniowy (do prawej, rgba (241 231,103,1) 0%, rgba (254,182,69,1) 100%); .block :: after content: "; width: 100%; height: 100%; position: absolute; background: inherit; z-index: -1; bottom: 0; transform-origin: left bottom; transform: skewY (3deg);
Podsumujmy.
The początek transformacji określa współrzędne elementu, który chcemy przekształcić. W powyższym przykładzie określiliśmy lewy przycisk który umieści współrzędne początkowe w lewym dolnym rogu bloku.
The transform: skewY (3deg); sprawia, że ::po blokuj pochylenie lub kąt przy 3 stopniach. Ponieważ określiliśmy współrzędną początkową jako lewy dolny róg, prawy dolny róg bloku podnosi się o 3 stopnie. Jeśli wymienimy początek transformacji do prawy dół a lewy dolny róg zostanie podniesiony o 3 stopnie.
Możesz dodać jednolity kolor tła lub gradient, aby zobaczyć wynik.
Ułatw to dzięki Sass Mixin
Aby to ułatwić, stworzyłem miks Sassa, aby dodać kątowe krawędzie, pomijając bóle głowy związane ze złożonością reguł stylu. Z poniższym mixinem możesz szybko określić stronę - górną lewą, górną prawą, dolną lewą lub dolną prawą - aby pochylić.
@mixin kątowa krawędź ($ pos-top: null, $ angle-top: null, $ pos-btm: null, $ angle-btm: null) szerokość: 100%; pozycja: względna; tło: gradient liniowy (do prawej, rgba (241 231,103,1) 0%, rgba (254,182,69,1) 100%); & :: before, & :: after content: "; width: 100%; height: 100%; position: absolute; background: inherit; z-index: -1; przejście: łagodzenie wszystkich .5s; @if $ pos-top & :: before @if $ pos-top == 'topleft' top: 0; początek transformacji: prawy top; transform: skewY ($ angle-top); @if $ pos-top = = 'topright' top: 0; początek transformacji: lewy top; transform: skewY (- $ angle-top); @if $ pos-btm & :: after @if $ pos-btm == 'bottomleft' dół: 0; początek transformacji: prawy dół; transform: skewY (- $ angle-btm); @if $ pos-btm == 'bottomright' dół: 0; początek transformacji: lewy dół; transform: skewY ($ angle-btm);
W miksie są cztery zmienne. Pierwsze dwie zmienne, $ pos-top i $ angle-top, określić górna współrzędna początkowa i stopień. Dwie ostatnie zmienne określają koordynować i stopień dla Dolny bok.
Jeśli wypełnisz wszystkie cztery zmienne, możesz ustawić obie strony - górną i dolną - elementu.
Użyj Sassa @zawierać składnia do wstawienia miksu do elementu. Możesz zobaczyć przykłady poniżej:
Aby dodać skośną krawędź lewy górny bok:
.block @include angle-edge (topleft, 3deg);
Aby dodać skośną krawędź prawy dolny bok:
.block @include angle-edge (bottomright, 3deg);
Aby dodać skośną krawędź lewy górny i prawy dolny bok:
.block @include angle-edge (topleft, 3deg, bottomright, 3deg);
Poniżej znajduje się demo z zastosowanymi miksami. Zmień pole wyboru, aby przełączyć na inny styl.
To jest to!
