How do you go about creating things like this CSS or just a svg?

These display sort of a process flow, where each arrow is a step of the process. Also what are the things called? surely there is a name, we name everything else haha
No description
6 Replies
Joao
Joao11mo ago
You can use clip-path to give it that shape to a simple div. For anything more complicated than that I would probably go with SVG instead. https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path I don't know what to call these. Step indicators?
Zerthz
Zerthz11mo ago
here is a better example of what I actually want to create, the flowing on the right side. the fact that they "enter" each other is what makes things complicated
No description
Joao
Joao11mo ago
That is definitely achievable with CSS: https://codepen.io/D10f/pen/RwvXXJX Very rough example, you'll have to come up with a nice way of ensuring the "arrows" have their parent's background color though. But it's doable.
clevermissfox
clevermissfox11mo ago
Pseudo element is way easier than the clipPath I was going to suggest and makes sense as it’s a decorative element, don’t need an svg in the markup for it
Joao
Joao11mo ago
Yes sometimes I forget about how to do this little things and just need to try 😄
Zerthz
Zerthz11mo ago
Will mark this as solved, cheers guys!
Want results from more Discord servers?
Add your server