Jak osiągnąć efekt skośnego tła na stronie? [CSS]

Od razu przyznam się, że kiedy pierwszy raz zobaczyłam skośne tło na stronie internetowej to myślałam, że ktoś obrócił tło strony. To była moja pierwsza myśl i jak się kazało błędna.

Efekt ten można uzyskać dużo łatwiej z pomocą clip-path. Właściwość ta już pojawiła się na moim blogu kiedy omawiałam dopasowanie tekstu do kształtu obiektu. Zapewne już w tedy niektórym zapaliła się lampka w głowie czy aby z jej pomocą nie można zrobić jeszcze jakiś innych ciekawych efektów.

Tak więc dziś wykorzystamy clip-path do uzyskania innego ciekawego efektu.

Jak zrobić skośne / ucięte tło? (skewerd hero)

Na początek pokażę wam 2 ciekawe generatory z pomocą, których łatwiej nam będzie uzyskać pożądany kształt:

• https://bennettfeely.com/clippy/
• http://www.cssplant.com/clip-path-generator

Z pomocą tych narzędzi nawet bez dobrej znajomości clip-path z łatwością będziemy mogli tworzyć ciekawe kształty tła. Nie tylko takie jak gdyby z wyciętymi fragmentami. Oczywiście to co zobaczymy w generatorze to będzie dopiero „półprodukt”. Generator pokaże nam bowiem jedynie przykładowe rozwiązanie z pomocą grafiki.

Na szczęście nie musimy nadmiernie kombinować. Kod z generatora zadziała również na inne obiekty takie jak obiekt blokowy np. DIV. W naszej kwestii będzie więc dobranie odpowiednich marginesów i paddingów. Tak by zawartość kontenera nie znajdowała się w „przycinanej” części obiektu.

Jak samodzielnie pochylić tło?

Dobrze to teraz przejdźmy bardziej do praktyki.

Przykład:

Pierwszy element

clip-path: polygon(0 0, 100% 0, 100% 71%, 0% 100%); 
height: 150px; width: 100%;     
background-color: #17dcaf;

Drugi:

clip-path: polygon(0 17%, 100% 0, 99% 100%, 0% 100%); 
height: 150px; width: 100%;    
background-color: #bb5e5e;

Jak widać DIV nie przylegają do siebie. Pomimo tego, że znajdują się obok siebie i oba posiadają jak gdyby ścięte krawędzie. Dodatkowo nie widać treści zamieszczonej w drugim obiekcie. Następujące problemy bardzo łatwo można rozwiązać z pomocą padding i margin.

Przykład:

CSS pierwszy

clip-path: polygon(0 0, 100% 0, 100% 71%, 0% 100%); 
height: 150px; width: 100%; 
background-color: #17dcaf; 
padding: 3%; 
margin-bottom: -4%;

CSS Drugi

clip-path: polygon(0 17%, 100% 0, 99% 100%, 0% 100%);
height: 150px; 
width: 100%; 
background-color: #bb5e5e; 
padding: 3%;

Po wprowadzeniu drobnych zmian w CSS obiekty zbliżyły się do siebie, ale coś tu nadal coś tu nie gra. Z cięcia mają inny kształt nie pasujący do siebie. Musimy więc trochę z tym poeksperymentować. Dość istotne jest, że zmiana szerokości strony również może spowodować, że nasze obiekty nie będą do siebie przylegać.

Skośne tło a RWD

Wszystko ładnie, ale obecnie by strona spełniała normy musi być ona responsywna (RWD) dlatego też do poniższego  przykładu dodałam taką opcje:

Przykład 3 z RWD

See the Pen MWWJaax by Aura (@Julka85) on CodePen.

Jak widać trochę z tym było zabawy – jednak specjalnie trudne to nie jest. Bez pomocy generatora z pewnością było by o wiele gorzej i trwało by dłużej.

Jeśli macie jakieś uwagi i sugestie o co do treści wpisu zachęcam do komentowania na FB lub bezpośrednio pod wpisem.

Aurelia Sypniewska

W branży IT jestem już od 2007 roku. W tym czasie zajmowałam się głównie tematyką pozycjonowania i budowy stron internetowych. Hobbistycznie zajmuje się fotografią, podróżami (głównie tymi mikro). Interesuje się mitologią (Nordycką, Grecką i Rzymską) i historią.