Implementacja serwisów internetowych

CSS wielokąty – rysowanie figur i kształtów, generatory

CSS wielokąty, generator kodu

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ą najbardziej optymalnym sposobem rysowania CSS, jednakże w szybki i dość łatwy sposób umożliwią skorzystanie z wygenerowanej figury.

Przykłady popularnych generatorów CSS dostępnych w Internecie:

Bieżący artykuł „CSS wielokąty” jest kontynuacją wcześniej opublikowanego wpisu pod tytułem: .

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ą odpowiednich generatorów. Przedstawione przykłady są jednak w pełni z optymalizowane, przez co ich złożoność obliczeniowa będzie znacząco niższa, niż wygenerowane rozwiązania w zautomatyzowanych mechanizmach.

UWAGA! - Sterowanie rozmiarem narysowanych przykładów

Rozwiń listęSchowaj listę

Wszystkie zbudowane poniżej przykłady bazują na jednostce wielkości „em”, dzięki której sterowanie wielkością narysowanej figury jest bardzo proste i odbywa się tylko za pomocą parametru 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 . 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 tą informację, przykłady rysowania trójkątów z pierwszej części 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:

  1. narysować dwa trapezy pionowe i połączyć je ze sobą (jeden po lewej stronie, drugi po prawej),
  2. obrócić heksagon z przykładu poprzedniego za pomocą funkcji transform: rotate(angle),
  3. skorzystać z kolejnego selektora :after i 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: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 można narysować korzystając z prostokąta i dwóch trapezów.

← Poprzedni artykuł

Następny artykuł →

Komentarze: 2

  1. Anon

    Anon

    2 stycznia 2017 o 17:51

    Czm tworzysz stronę o technologiach webowych, a masz stronę w WordPress ?

    Odpowiedz
    • Daniel Pietrasik

      Daniel Pietrasik

      2 stycznia 2017 o 20:09

      Strona którą właśnie czytasz jest zbudowana w oparciu o system CMS WordPress. Jednakże WordPress jest tylko narzędziem, które znacznie skraca czas tworzenia strony internetowej, umożliwiając jednocześnie zarządzanie treścią przez osobę nie będącą programistą.

      Jednak moją główna specjalizacja są systemy dedykowane, które są znacznie szybsze i wydajniejsze od WordPressa. Tego rodzaju strony pisane są pod konkretnego klienta i w pełni spełniają jego oczekiwania przy zachowaniu maksymalnej możliwej wydajności. Niestety WordPress, jak każdy gotowy system CMS ogólnie dostępny na rynku, poza swoimi zaletami ma też wady, które niestety w określonych przypadkach są nie do przeskoczenia.

Komentuj

Twój adres email nie zostanie opublikowany. Służyć będzie tylko i wyłącznie w celu udzielenia odpowiedzi na zadane pytanie lub komentarz. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *.