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 (obrazki) wczytują 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.
Od autora
Obecnie, zdecydowana większość przeglądarek obsługuje już wszystkie standardy CSS3. Pomimo że, istnieją pomiędzy nimi drobne różnice, to deweloperzy nie muszą już martwić się o to, że ich kod gdzieś nie będzie prawidłowo interpretowany.
W Internecie dostępnych jest wiele serwisów, w których można sprawdzić kompatybilności używanej funkcji z różnymi przeglądarkami internetowymi i ich starszymi wersjami. Jednym z ciekawszych przykładów serwisów określających zgodność funkcji CSS jest witryna: Can I use. Za pomocą przedstawionego serwisu, można sprawdzić 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.
Bieżący artykuł „CSS Figury geometryczne” jest kontynuacją wcześniej opublikowanego wpisu pod tytułem: CSS3 podstawowe kształty i figury.
Przykład 14: trapez
Aby narysować trapez, należy 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:
widthzheight,border-leftzborder-top,border-rightzborder-bottom,border-topzborder-right.
Trapez pionowy to narysowany 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 narysowany 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 css.
