Figury geometryczne z użyciem CSS

Wpis na blogu

Kategoria wpisu Kurs CSS, Kursy Tagi: , , , , , , , , , , , , , , on przez .


1 Gwizdka2 Gwizdki3 Gwizdki4 Gwizdki5 Gwizdki (Brak ocen)
Loading...

Pojawienie się CSS3 dało bardzo duże możliwości twórcą stron internetowych (ale nie tylko) a w połączenia z HTML5 zmieniło kodowanie stron w prawdziwe programowanie. Umożliwiło np. tworzenie obiektów, które do tej pory na stronie umieszczanie były za pomocą obrazków. Chodzi tu np. o gradienty lub różne obiekty takie jak chociaż by figury geometryczne. Wszystkich zalet i możliwości CSS3 jednak nie zamierzam omawiać w tym wpisie. Za pomocą CSS można utworzyć na stronie zarówno proste jak i skomplikowane figury geometryczne takie jak okrąg, trójkąt czy trapez lub hexagon.

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

Kwadrat

Prostokąt

Koło

Owal

Trójkąt skierowany do góry

Trójkąt skierowany na dół „do góry nogami”

 

Trójkąt skierowany w lewo

Trójkąt skierowany w prawo

Trójkąt w górnym lewym narożniku – trójkąt prostokątny

Trójkąt w górnym prawym narożniku – trójkąt prostokątny

 

Trójkąt w górnym w dolnym lewym narożniku – trójkąt prostokątny

 

Trójkąt w górnym w dolnym prawym narożniku – trójkąt prostokątny

Strzałka

Trapezoid

 

Parallelogram

 

Gwiazda (6-ramion)

 

Gwiazda (5-ramion)

 

Pentagon

 

Hexagon

 

Heart – serce

Diamond Square – diament

Pac-Man

 

12 Point Burst – dwunasto ramienna gwiazda

Więcej ciekawych kształtów:
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

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *