CSS Formy i struktury
W poprzednich częściach artykułu przedstawiono wszystkie podstawowe kształty i figury geometryczne. W tej części, wykorzystując dotychczas poznaną wiedzę, zaprezentowano jeszcze bardziej złożone formy i struktury, które są możliwe do narysowania za pomocą prostego 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 css.
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
Aby stworzyć główną figurę, wykorzystano koło narysowane za pomocą właściwości border
, w którym jeden z boków ma ustawione oddmienne parametry. 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.