Wykorzystanie kodu programistycznego, zamiast znacznie wolniej ładujących się obrazków, jest w wielu przypadkach znaczną optymalizacją. Należy jednak pamiętać, że pomimo znacznie wyższego czasu ładowania, zasoby zewnętrzne (takie, jak obrazki, animacje) ładują się, wyglądają i działają dokładnie w taki sam sposób, niezależnie od rodzaju używanego urządzenia, systemu, czy przeglądarki internetowej. W przypadku tworzenia figur geometrycznych za pomocą kodu CSS należy brać pod uwagę rodzaj docelowego urządzenia i obsługiwane przez niego przeglądarki.

Standardy stron internetowych się zmieniają. Języki programowania ewoluują. Dokładnie dwie takie same funkcje są implementowane w różnych przeglądarkach w odmienny sposób. Metody interpretacji funkcji (zwłaszcza na starszych urządzeniach) są różne. Podczas rysowania figur geometrycznych za pomocą kodu CSS, należy skorzystać z dokumentacji i sprawdzić ograniczenia oraz możliwości wszystkich użytych właściwości i ich wartości.

W Internecie dostępnych jest wiele serwisów, w których można wprowadzić nazwę używanej funkcji i uzyskać informację o jej kompatybilności z różnymi przeglądarkami internetowymi. Jednym z ciekawszych przykładów serwisów określających zgodność funkcji CSS z przeglądarkami internetowymi jest witryna: Can I use. Za pomocą przedstawionego serwisu, użytkownik może wprowadzić nazwę dowolnej właściwości CSS i uzyskać listę kompatybilnych z nią przeglądarek i ich wersji. Strona udostępnia również bezpośredni link do dokumentacji, określającej poprawny sposób korzystania z wyszukiwanej właściwości.

CSS Figury geometryczne
Zrzut ekranowy serwisu „Can I use” umożliwiającego sprawdzenie kompatybilności wybranej funkcji z różnymi przeglądarkami i ich wersjami.

Bieżący artykuł „CSS Figury geometryczne” jest kontynuacją wcześniej opublikowanego wpisu pod tytułem: CSS3 Podstawowe kształty i figury za pomocą języka kaskadowych arkuszy stylów.

Przykład 14: trapez

Aby narysować trapez, należy wykorzystać wiedzę dotyczącą rysowania trójkątów. Trapez to nic innego jak „ścięty” trójkąt. Wystarczy więc narysować trójkąt, a następnie określić mu dodatnią wartość właściwości width.

Przykład 15: trapez prostokątny

Trapez prostokątny jest rodzajem trapezu, którego jeden bok posiada kąt prosty. Do jego narysowania, należy użyć trójkąta prostokątnego i w podobny sposób jak w przykładzie czternastym zmodyfikować jego właściwość width.

Przykład 16: trapez równoramienny

Implementacja trapezu równoramiennego jest modyfikacją kodu odpowiedzialnego za rysowanie trójkąta równoramiennego. Korzystając z przykładu trójkąta równoramiennego, należy ustawić dodatnią wartość właściwości width. Można też skorzystać z przykładu czternastego lub piętnastego i ustawić takie same wartości właściwości border-left oraz border-right.

Przykład 17: odwrócony trapez

Jeśli do rysowania trapezu zostanie wykorzystana właściwość border-bottom, to dłuższą podstawą trapezu będzie jego dolna podstawa. Jeśli do rysowania trapezu zostanie wykorzystana właściwość border-top, to dłuższą podstawą trapezu będzie jego górna podstawa.

Przykład 18: trapez pionowy (obrócony w lewo)

Aby narysować trapez pionowy, należy zamienić ze sobą następujące wartości właściwości trapezu poziomego:

  • widthheight,
  • border-leftborder-top,
  • border-rightborder-bottom,
  • border-topborder-right.

Trapez pionowy to wciąż trójkąt skierowany w lewą stronę z dodaną właściwością height.

Przykład 19: trapez pionowy (obrócony w prawo)

Aby lewy bok trapezu był dłuższy od prawego, należy wykorzystać właściwość border-left zamiast właściwości border-right.

Trapez pionowy (obrócony w prawo) to wciąż trójkąt skierowany w prawą stronę z dodaną właściwością height.

Przykład 20: równoległobok (pochylony na lewo)

W celu narysowania równoległoboku należy narysować prostokąt, a następnie pochylić go za pomocą funkcji transform: skewX( angle ) o określony kąt.

Przykład 21: równoległobok (pochylony na prawo)

Manewrując wartością kąta transformacji, można dowolnie pochylać równoległobok. Wartości ujemne kąta pochylają figurę w przeciwną stronę.

Przykład 22: równoległobok pionowo (pochylony do góry)

Aby narysować równoległobok pionowo, należy skewX( angle ) zamienić na skewY( angle ).

Przykład 23: równoległobok pionowo (pochylony do dołu)

Podobnie, jak w przypadku obracania równoległoboku w prawą stronę, aby narysować równoległobok pionowy pochylony w dół, należy zmienić kąt pochylenia na wartość ujemną.

Przykład 24: romb (pochylony na lewo)

Romb to równoległobok, dla którego wszystkie boki są jednakowej długości. Aby narysować romb, należy skorzystać z twierdzenia sinusów i wyliczyć nową wysokość figury. Wysokość będzie równa iloczynowi sinusa kąta ostrego rombu i długości jego boku (h = sin(α) * a).

Przykład 25: romb (pochylony na prawo)

Manewrując wartością kąta pochylenia rombu (identycznie, jak w przypadku równoległoboku), można pochylić figurę w przeciwną stronę.

Przykład 26: romb pionowo (pochylony do góry)

Korzystając z funkcji skewY( angle ) (identycznie, jak w przypadku równoległoboku pionowego), można obrócić romb pionowo.

Przykład 27: romb pionowo (pochylony do dołu)

Ponownie manewrując wartością kąta pochylenia rombu (identycznie, jak w przypadku równoległoboku pionowego), można pochylić figurę w przeciwną stronę.

Ciąg dalszy w artykule: CSS wielokąty – rysowanie figur i kształtów, generatory.