Ask a question about css style

clipboard.png
when I click on different buttons, the projected lines move to the clicked position.
has no idea.
ask the gods to give me a hint

Css
Mar.28,2021

can only say that this design is too weird, although it can be realized. But it's ugly. Imagine what the leftmost icon looks like.

The idea of

implementation is to calculate the coordinates of several connection points, and then use the svg path image to cover it.


get the position of the clicked element relative to the screen, and the position of the upper left and lower left points of the details on the right, which can be drawn with canvas, the background is transparent, or use lines to adjust the length and tilt angle


if you have to draw, you can use SVG, to find a tutorial. It's very simple. It's a question of three lines.

but I feel that this design is not very good. Now most of the screens are wide. Clicking on the left side and then updating the content on the right side is a bit wasteful, and it is not conducive to responsiveness.


if it's just a line, use the two children of the element on the right, set transform-orgin to 100%, and then control the scaleX, and rotateZ of transform.

if you still want to shadow, you may have to use svg or canvas. Div + css can't think of any solution.

Menu