CSS wielokąty – generator
W sieci dostępnych jest wiele, bardzo różnych generatorów, 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 dość łatwy sposób umożliwią skorzystanie z wygenerowanej figury.
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 niżej przykładów można wygenerować za pomocą wybranych generatorów online. Przedstawione przykłady są jednak z optymalizowane, przez co ich złożoność obliczeniowa będzie znacząco niższa, niż wygenerowane rozwiązania w zautomatyzowanych mechanizmach.
Sterowanie rozmiarem narysowanych przykładów
Wszystkie zbudowane poniżej przykłady bazują na jednostce wielkości zależnej em, dzięki której sterowanie wielkością narysowanej figury jest bardzo proste i odbywa się tylko za pomocą parametru font-size zdefiniowanego w obiekcie nadrzędnym figury geometrycznej.
Do tej pory większość przykładów rysowana była za pomocą jednostki wielkości stałej px (piksele), dla której w celu powiększenia obiektu należało ponownie przeliczyć wszystkie wartości użytych właściwości 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 za pomocą języka kaskadowych arkuszy stylów. 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. Podobnie jak deltoid można zbudować go z dwóch różnych figur. W tym przypadku będzie to trapez i trójkąt.
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.
Oczywiście najprostszym (niekoniecznie najlepszym) rozwiązaniem będzie druga opcja. W poniższym rozwiązaniu wykorzystano trzeci wariant.
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.
