Figury geometryczne i ciekawe kształty z użyciem CSS

Czas czytania: < 1 minut

Pojawienie się CSS3 otworzyło nowe możliwości przed twórcami stron internetowych. A połączenie jego możliwości z HTML5 zmieniło kodowanie stron w prawdziwe programowanie. Czyli jednym słowem otwarło nam drogę do naprawdę imponujących możliwości.

Tworzenie obrazów w CSS

Nowymi ciekawymi opcjami w CSS3 jest np. tworzenie obiektów, które do tej pory na stronie umieszczanie były za pomocą obrazków – czyli zastępowanie grafiki kodem. Chodzi tu np. o efekty takie jak:

  • gradienty – czyli tła obiektów przechodzące płynnie z jednego koloru w drugi
  • figury geometryczne, różne kształty
  • dopasowywanie układu tekstu do różnych elementów (np. układ typu Flexbox)

A to jedynie przykłady.

Dziś jednak nie zamierzam ich wszystkich omówić. Jeśli chcecie dowiedzieć się czegoś więcej o innych zastosowaniach CSS3 odsyłam wam do innych moich wpisów. A teraz zajmę się jedynie prostymi (i nie tylko) figurami jakie można stworzyć z pomocą CSS3.

Poniżej postaram się przedstawić kilka przykładowych wyjściowych figur.

Budowa prostych figur geometrycznych w CSS

Poniżej znajdziecie kilka przykładowych figur utworzonych jedynie z pomocą CSS.

See the Pen
Untitled
by Aura (@Julka85)
on CodePen.0

Więcej ciekawych kształtów znajdziecie:
https://css-tricks.com/examples/ShapesOfCSS/

dodatkowe tagi:
kształty w html
podstawowe kształty figur geometrycznych
CSS Figury geometryczne za pomocą kodu.
figury geometryczne z użyciem CSS