Jump to content
Sign in to follow this  
kuci

Stylizacja listy kroków w formie strzałek HTML i CSS

Recommended Posts

Witam chciałbym osiągnąć taki jak efekt:

Spoiler

qwe.png

Czyli tło w takim kształcie a na nim napisy.

 

Prosiłbym o jakieś wskazówki do sensownego rozwiązania tego zadanka oraz  jak wy to widzicie, serdeczne dzięki pozdrawiam

Share this post


Link to post

Hehe  mam nadzieję, że wystarczy Ci mój podobny przykład i resztę dasz sam radę: http://codepen.io/Karmele-ON/pen/rLkQXK

Ja ten 'dzióbek' zrobiłem w wersji kwadrata, natomiast Ty możesz skorzystać z border.

  • Like 2

Share this post


Link to post
49 minut temu, Salva napisał:

Hehe  mam nadzieję, że wystarczy Ci mój podobny przykład i resztę dasz sam radę: http://codepen.io/Karmele-ON/pen/rLkQXK

Ja ten 'dzióbek' zrobiłem w wersji kwadrata, natomiast Ty możesz skorzystać z border.

Jasne salva dobra robota, ja właśnie kobinowałem coś pod border, ogólnie biorę pod uwagę też RWD dlatego zależy mi na jak najlepszych rozwiązaniach, myslisz ze centrowanie w pionie i poziomie flexem będzie dobrą opcją itemów w środku ?

display:flex;
	align-items: center;
	justify-content: center;

 

tylko że flex przy centrowanie nie bierze pod uwage kwadratu kurde.

http://codepen.io/kuci123/pen/yMNWqZ

Share this post


Link to post

Nie musisz tego centrować flexem. Wiem, że jest na niego aktualnie boom, ale... Wg mnie, to ostateczność.

Kwadraty wycentrowane są sposobem nr 3 z tego tematu:

Tutaj link bezpośredni: http://codepen.io/Karmele-ON/pen/pRONLE

Natomiast odnośnie skorzystania z border - wstawiłbym tu swoje, gotowe rozwiązanie, ale trzyma mnie klauzula poufności

Dlatego też wklejam coś, co Ci się na pewno przyda i może czegoś nauczy:

Powodzenia!

  • Like 1

Share this post


Link to post

Dobra dzięki rozwiązane ☺️

Share this post


Link to post
Guest
This topic is now closed to further replies.
Sign in to follow this  
×
×
  • Create New...