Generatory CSS figur geometrycznych
W sieci dostępne są generatory, które umożliwiają szybkie stworzenie dowolnej figury CSS, za pomocą wizualnego edytora. Jeśli programista nie posiada dostatecznie dużej wiedzy, może skorzystać z mechanizmów, które pomogą mu w sposób zautomatyzowany wygenerować pożądany kształt. Stworzone w ten sposób rozwiązania nie będą optymalnym sposobem rysowania CSS, jednakże w szybki i łatwy sposób umożliwią skorzystanie z wygenerowanej figury.
Od autora
Przed użyciem figury CSS wygenerowanej za pomocą generatora, rekomenduję sprawdzić jej poprawny wygląd i działanie na różnych przeglądarkach i urządzeniach docelowych. Zdarza się, że figury wygenerowane w sposób automatyczny, zwłaszcza te bardziej skomplikowane, wyglądają lub działają nieprawidłowo.
Bieżący artykuł „CSS wielokąty” jest kontynuacją wcześniej opublikowanego wpisu pod tytułem: CSS figury geometryczne rysowane za pomocą kodu.
Poniżej przedstawiono wybrane przykłady wielokątów, napisanych za pomocą języka kaskadowych arkuszy stylów CSS. Każdy z omówionych przykładów można wygenerować za pomocą wybranych generatorów online. Zaprezentowane przykłady zostały zoptymalizowane, przez co ich złożoność obliczeniowa będzie znacząco niższa, niż wygenerowane rozwiązania w zautomatyzowanych mechanizmach. Rekomenduję porównać kod generatora i ten, który został przygotowany przez specjalistę.
Sterowanie rozmiarem narysowanych przykładów
Wszystkie zbudowane poniżej przykłady bazują na jednostce wielkości zależnej em, dzięki której wielkością narysowanej figury steruje się tylko za pomocą parametru font-size.
Do tej pory większość przykładów rysowana była za pomocą jednostki stałej wielkości px (piksele), dla której zmiana wielkości obiektu wymagała ponownego, ręcznego przeliczenia wszystkich parametrów figury geometrycznej.
Jednostki wielkości zależne na przykład em pozwalają na łatwą zmianę wielkości figury, tylko za pomocą modyfikacji jednego parametru. Wielkość figury zmienia się proporcjonalnie do wielkości określonej we właściwości font-size.
Przykład 28: diament (obrócony kwadrat)
Sposoby rysowania trójkątów i kwadratów zostały przedstawione w pierwszej części bieżącego artykułu pod tytułem CSS3 podstawowe kształty i figury. Bazując na wcześniej omawianych przykładach, narysowano kwadrat, a następnie przy pomocy funkcji transform: rotate(angle) obrócono go o kąt 90 stopni.
Przykład 29: deltoid
Deltoid można zbudować za pomocą dwóch trójkątów połączonych ze sobą w jedną figurę. Wykorzystując przykład rysowania trójkątów z pierwszej części tego artykułu oraz selektor :before, który umożliwił stworzenie drugiego trójkąta, narysowano deltoid.
Przykład 30: brylant
Brylant jest figurą bardzo podobną do deltoidu. Można zbudować go z trapezu i trójkąta.
Przykład 31: pięciokąt (pentagon)
Pięciokąt składa się z trójkąta oraz trapezu. Korzystając z selektora :before i przedstawionych w poprzednich przykładach właściwości narysowano pentagon.
Przykład 32: sześciokąt (heksagon)
Aby narysować sześciokąt, wykorzystano dwa trapezy, które ułożone na wprost siebie stworzyły odbicie lustrzane.
Przykład 32: obrócony sześciokąt (heksagon)
Zadanie to można zrealizować na kilka sposobów, na przykład:
- narysować dwa trapezy pionowe i połączyć je ze sobą (jeden po lewej stronie, drugi po prawej),
- obrócić heksagon z przykładu poprzedniego za pomocą funkcji
transform: rotate(angle), - skorzystać z kolejnego selektora
:afteri stworzyć heksagon z dwóch trójkątów i prostokąta.
Przykład 33: siedmiokąt (heptagon)
Korzystając z selektorów :before i :after można narysować dowolną figurę złożoną z trzech innych podstawowych figur. Siedmiokąt można narysować, korzystając z trójkąta, prostokąta i trapezu.
Przykład 34: ośmiokąt (oktogon)
Ośmiokąt to połączenie prostokąta i dwóch trapezów.
Ciąg dalszy w artykule: CSS formy i struktury tworzone za pomocą kodu.
