咨询一个css样式的问题

clipboard.png
当我点击不同的按钮,投影的那两条线就会移动到点击的位置。
没有丝毫思路...
求各位大神给提示一下

阅读 2k
4 个回答

只能说这个设计太奇葩了,虽然可以实现。但是太难看了吧。想象一下最左边的图标点出来是什么样子。

实现思路就是计算出几个连接点的坐标,然后使用svg路径图片去覆盖就行了。

获取点击元素相对屏幕的位置,以及 右侧详情左上、左下两个点的位置,可以用 canvas 去绘制,背景透明,或者使用 线调整长度和倾斜角度

非要画的话,可以用 SVG,随便找个教程吧,很简单,3条线的问题。

不过感觉这个设计不太好,现在屏幕大多比较宽,点击左侧然后内容更新在右侧有点浪费,而且不利于响应式。

如果只是线,用右侧元素的两个子元素,transform-orgin设置为100% 0,然后控制transform的scaleX,以及rotateZ就可以了.

如果还要阴影的话,估计就只能用svg或者canvas了.div+css想不到什么方案.

推荐问题