Zazwyczaj kiedy chcemy użyć trójkąta (figury geometrycznej) na stronie internetowej używamy do tego jakieś grafiki. Jednak nie zawsze tak musi być. Trójkąty spokojnie możemy też tworzyć w CSS.
Wbrew pozorom to nie jest w cale takie trudne i co najciekawsze otwiera nam możliwości do tworzenia innych bardziej zaawansowanych obiektów geometrycznych.
Jak wykonać prosty trójkąt CSS?
Poniżej umieściłam kilka przykładów bardzo prostych trójkątów. Wszystkie te figury to tak naprawdę zwykłe <div>, który z pomocą styli CSS zostały odpowiednio zmodyfikowane.
See the Pen figura by Aura (@Julka85) on CodePen.
Wielkość trójkąta możemy zmieniać poprzez manipulację szerokością obramowania.
Jeśli się dobrze przyjrzycie kodowi to z pewnością zauważycie, że kod pierwszego i drugiego obiektu jest bardzo zbliżony. Różnica polega głównie na tym, że w pierwszym kontener nie ma nadanych wymiarów. To obramowanie border robi całą robotę. W drugim zaś mamy już nadane wymiary co dość mocno zmienia wygląd całości.
figury geometryczne z użyciem CSS
Źródło: