Diagonal lines across sections/rows/columns

[yingfuli]

Hi,

Perhaps someone could point me in the right direction on this. What I’m trying to accomplish is to have an image (or column with text) in the middle of one section and then to have several diagonal lines emanating from that image (or text) towards several content modals that will highlight one USP of the client.

See attached image for a rough sketch.

Does anyone know how to accomplish these lines? I can pretty much figure out how to place the modals (with several sections or rows).

[rad]

Hi @yingfuli,

Thanks for reaching out.

Diagonal lines would be easy, but achieving that complete layout would be tricky.

I created a sample here, https://codepen.io/anon/pen/vzxVoB

But again, that’s just a line, creating a layout or design similar to your image is very complex one, it must be responsive ( the size, the positioning, the orientation, and so on ), because if not, then it’s just the same as adding the static image which is easier.

Another approach is using HTML5 Canvas and draw all your design elements there, https://www.w3schools.com/html/html5_canvas.asp

I recommend consulting it to a developer as that may able to implement this correctly.

Thanks!

[yingfuli]

Thanks for the reply.

That pen for the line: is that possible across more than one sections/rows?

The sketch was just that. My plan is to just use three rows with each three columns and go from there. That way I could probably control the responsiveness. So if the line is applicable across more than one sections or rows, I’m good to go (I think, haha).

[rad]

Hi @yingfuli,

It could be possible, but that just alone from code pen isn’t enough. You’ll need multiple of it with different positioning and angle. Though again, columns are responsive so it may still need further customization to properly implement it.

Thanks!