W jaki sposób zrobić takie linie w css?

Question

Witam zastanawiam się w jaki sposób można zrobić takie linie pomiędzy obrazami.

 

Pozdrawiam

Answer 1

Łap gotowca: https://codepen.io/thryndl/pen/BgRLJV

Kod jest na tyle prosty, że patrząc po komentarzach zrozumiesz działanie.

Comments

Dzięki wielkie :D

Answer 2

Pokombinował bym z pseudo elementami, after before.

Comments

Na pewno to też zadziała niestety nie znam się jeszcze zbytnio na pseudo elementach.

---

nie znam się jeszcze zbytnio na pseudo elementach

Ale to nie jest fizyka kwantowa... To temat do ogarnięcia w 15 minut...
http://blog.eduweb.pl/pseudo-elementy-before-i-after-w-css/

Answer 3

jak zaczynasz naukę css to tak jakprościej to chyba po prostu zrobić divy o wysokosci zgodnej z grubością tych kresek i we flexie sobie to ustawić odpowiednio wyśrodkowane w pionie i w poziomie zgodnie z potrzebą.

Comments

Zrobiłbym tak ale jak ktoś zobaczy taki kod to się za głowę złapie. :D

---

wcale nie, zależy jak to wszystko opiszesz, np. poprzez odpowiednio opisowe nazwy klas itp. Na przykład dla mobilek możesz łatwo sobie ustawić dla całego konterera flex-direction na column i te "linie" albo też odwrócić ( a dokładniej dla mobilek zmienić width/height) albo dać im display none i ukryć. Zależy od potrzeb i od tego jak to sobie UX wymyśli na makietach.