Trójkąt w CSS

Wstęp

Być może pierwsze pytanie, które Ci się nasuwa brzmi "po co?".

Zastosowań tej techniki może być wiele, ale chyba najczęściej wykorzystywana jest do stworzenia strzałki (w górę, dół, prawo, lewo).

Czemu nie obrazek strzałki? Przecież można narysować wszystkie warianty strzałki w programie graficznym, zapisać w png i gotowe - prosta sprawa.

Niby tak, ale po pierwsze takie obrazki "ważą" swoje. Po drugie, jeśli nagle postanowisz zmienić kolor strzałki lub jej rozmiar, to czeka cię sporo pracy w programie graficznym.

A może SVG?

O! Ten pomysł dużo bardziej mi się podoba. Daje nam też ogrom możliwości, ponieważ możemy narysować naprawdę fikuśne kształty i puścić wodze naszej nieograniczonej fantazji. Jest jednak mały minus - pisanie SVG z "głowy" wymaga bardzo dobrej znajomości tematu - nie jest to tak łatwe jak w CSS.

Zróbmy to w CSS!

Ale jak?

Border to the rescue!

Kluczową właściwością CSS, która nam umożliwi narysowanie trójkąta, jest border (obramowanie).

Zaskoczony? Kiedy pierwszy raz usłyszałem o tej technice byłem mocno zdziwiony. Przecież border kojarzył mi się, zawsze z kształtem prostokąta a tu nagle ma być pomocny przy trójkącie?🧐

Nie wiem jak ty, ale ja zazwyczaj używam jednego koloru dla całego obramowania, np. border: 1px solid black;.

Zobacz sam jak wygląda takie typowe obramowanie dla niebieskiego kwadratu. Umyślnie ustawiłem bardzo dużą szerokość obramowania, żeby wszystko było dobrze widoczne.

Widzisz gdzieś powyżej cokolwiek przypominającego trójkąt? No właśnie! Ja też nie!

Poeksperymentujmy trochę. Ustawmy teraz różne kolory dla każdej strony obramowania niebieskiego kwadratu. W tym celu użyjemy właściwości border-top, border-right, border-bottom i border-left zamiast zapisu skrótowego border.

Powinna zapalić się lampka jak to zobaczysz.

Zapaliła się?

Zmiana kolorów "ujawniła" nam jak tak naprawdę jest rysowane obramowanie.

Wygląda to jak "realna" ramka zdjęcia - poszególne strony obramowania łączą się ze sobą pod kątem 45 stopni. Oczywista oczywistość, jak mawiał klasyk!

Ramki obrazów

No dobra. Wszystko fajnie, ale jak dotą udało nam się stworzyć tylko trapez. Mówiąc dokładniej, mamy 4 trapezy: zielony, żółty, czarny i czerwony.

Ewidentnie idziemy w dobrym kierunku, ale jednak trochę nam jeszcze brakuje do wymarzonego trójkąta.

Co należy zrobić, żeby nasze trapezy przekształcić w trójkąty?

Poniższa animacja powinna dać ci solidną podpowiedź:

Wow!

W animacji widać, jak zachowuje się obramowanie w trakcie zmniejszania rozmiaru niebiekiego kwadratu.

Gdy kwadrat zupełnie znika, to otrzymujemy upragnione trójkąty!

Już jesteśmy w ogródku, zaraz będziemy witać się z gąską!😉

Zobacz na spokojnie, jak to wygląda bez animacji:

Jedyne co należało zrobić, to ustawić szerokość i wysokość kwadratu na zero. W ten sposób widoczne pozostało tylko obramowanie, które formuje cztery trójkąty.

Załóżmy sobie, że naszym celem jest stworzenie strzałki w górę. Aby to się udało, musimy się pozbyć wszystkich obramowań poza dolnym, które to formuje nam strzałkę w górę.

Zatem zróbmy tak, w kodzie css pozostawię tyko deklarację border-bottom, pozostałe usunę.

Uuups!

Wszystko zniknęło, nie ma śladu nawet po dolnym obramowaniu.

Okazuje się, że obramowanie elementu o rozmiarze zero jest rysowane tylko wtedy gdy istnieją przynajmniej dwa obramowania stykowe.

Spróbujmy zatem przywrócić obramowanie tylko po lewej stronie. Będzie ono stykać się z dolnym obramowaniem, więc powinno być widoczne.

Zobaczmy co się stanie:

Ok, rzeczywiście czerwone i czarne obramowanie się pojawiło. Niestety dolna ramka, która miała być naszą strzałką w górę, straciła swój poprawny kształt.

Dlaczego tak się stało?

Animacja znowu powinna nam pomóc:

Ma to sens prawda?

Tracisz powoli cierpliwość i nadzieję? Jeśli tak, to wytrzymaj jeszcze chwilkę, bo zbliżamy się do brzegu 😉.

Musimy wrócić do wersji z wszystkimi obramowaniamy tworzącymi 4 trojkąty.

Wiesz już, że nie można po prostu usunąć wszystkich obramowań poza dolnym. Dolne obramowanie musi się stykać z conajmniej jednym obramowaniem po stronie lewej lub prawie, żeby w ogóle było widoczne.

Wiesz również, że pozostawienie tylko dolnego i lewego obramowania powoduje zmianę kształtu naszej strzałki. Spróbujmy w takim razie usunąc tylko górne obramowanie, a lewe, dolne i prawe zostawić.

Jesteśmy już naprawdę blisko!

Strzałka ma odpowiedni kształt i pozbyliśmy się zbędnego górnego obramowania.

Do szczęścia brakuje nam tylko pozbycie się lewej i prawej ramki. Wiemy już jednak, że zwyczajne usunięcie ich, nie da właściwego efektu.

Co nam pozostaje?🤔

Jedyną opcją jaką mamy, jest zmiana koloru obramowania po niechcianych stronach.

Jaki kolor?

Biały będzie w porządku, bo wokół mamy biel. Jednak lepiej, gdyby nasza strzałka wyglądała dobrze na każdym możliwym tle. Na szczęście istnieje taki "kolor", a mianowicie transparent (przeźroczysty).

Zobaczmy!

Wreszcie sukces! 👏

Dla porządku pokażę jeszcze jak będzie wyglądał kod CSS dla strzałek w innch kierunkach.

Strzałka w dół:

Strzałka w prawo:

Strzałka w lewo:

Autor
Karol Dworakowski
Programista, który odkrył w sobie pasję dzielenia się wiedzą.
Kontakt

Podobał Ci się ten artykuł?

Jeśli tak, to zapisz się do mojego newslettera!
Otrzymasz informacje o najnowszych wpisach, które poszerzą Twoją programistyczną wiedzę i przybliżą Cię do celu.
*Zero spamu, zero sztuczek - Twój adres jest bezpieczny!