How can I create CSS arrows that link several boxes, such as mindmeinster mind maps?

Asked

Viewed 66 times

2

I’m doing a project that I need to facilitate the demonstration of sales flows.

I’ve been able to create that so far:

inserir a descrição da imagem aqui

The problem is that the way I did it has no way to leave the creation of these dynamic processes, mainly the alternative processes...

I need help to understand what would be a good way to make these arrows by connecting one box to another? (don’t need to be arrows equal to mine)

css
  • 1

    I believe that the best solution is with JS and Canvas... Unfortunately only with CSS vc will not achieve much dynamism in things... Now if it’s just to draw static graphics I suggest you use SVG, or even clip-path depending on whether it’s something simpler with a few arrows and angles

  • Thanks for the feedback, you know some example using these two cited forms?

  • Here is a model, you can mount the vectors in Figma and then export the SVG https://www.figma.com/resources/assets/ux-flow-2/ (it doesn’t have to be that there are other similar you have to search). About Canvas I think it would be better if you look for some jQuery plugin here are some https://ourcodeworld.com/articles/read/117/top-5-best-sketchpads-and-manually-drawing-canvas-javascript-and-jquery-plugins

No answers

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.