CSS Formy i struktury
Do tej pory (w poprzednich częściach artykułu) przedstawiono już wszystkie podstawowe kształty i figury geometryczne. W tej części, wykorzystując wiedzę poznaną wcześniej, zaprezentowano jeszcze bardziej złożone formy i struktury, które są możliwe do narysowania za pomocą kodu CSS.
Bieżący artykuł „CSS Formy i struktury” jest kontynuacją wcześniej opublikowanego wpisu pod tytułem: CSS wielokąty – rysowanie figur i kształtów, generatory.
Przykład 35: packman
Packman to inaczej koło narysowane za pomocą właściwości border, które nie posiada ustawionego koloru na jednym boku.
Przykład 36: stożek
Stożek rysowany jest na podobnej zasadzie co Packman z tą różnicą, że kolory jego boków są odwrócone.
Przykład 37: gwiazda
Aby narysować gwiazdę, należy skorzystać z selektorów :before oraz :after, które umożliwią utworzenie 3 oddzielnych trójkątów. Każdy z nich za pomocą właściwości transform: rotate( deg ) należy obrócić o odpowiedni kąt względem siebie.
Przykład 38: odznaka (wersja 1)
Odznaka składa się z dwóch kwadratów, które są odpowiednio obrócone względem siebie za pomocą właściwości transform: rotate( deg ).
Przykład 39: odznaka (wersja 2)
W tym przykładzie odznaka zbudowana jest z trzech kwadratów, które podobnie do poprzedniego przykładu, obrócone zostały względem siebie za pomocą właściwości transform: rotate( deg ).
Przykład 40: lupa
Do narysowania lupy wykorzystujemy okrąg i przesunięty względem niego prostokąt.
Przykład 41: krab
Krab jest przykładem formy, która pokazuje, że CSS nie ma ograniczeń pod względem rysowania. Za pomocą tylko jednej właściwości box-shadow, narysowana została cała struktura kraba.
Przykład 42: yin i yang
Yin i yang przykład przeciwności i równowagi. Aby stworzyć główną figurę, wykorzystano koło narysowane za pomocą właściwości border, w którym jeden z boków ma inny kolor i wielkość niż inne. Selektory :before oraz :after wykorzystano do narysowania dwóch wewnętrznych kropek. Selektory mają kształt kół z obramowaniem, które przysłania główną figurę, tworząc docelowy kształt.
