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
6 Replies
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?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
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.
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
Yes sometimes I forget about how to do this little things and just need to try 😄
Will mark this as solved, cheers guys!