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: .

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.