鍍金池/ 問答/HTML/ 咨詢一個(gè)css樣式的問題

咨詢一個(gè)css樣式的問題

clipboard.png
當(dāng)我點(diǎn)擊不同的按鈕，投影的那兩條線就會(huì)移動(dòng)到點(diǎn)擊的位置。
沒有絲毫思路...
求各位大神給提示一下

回答
編輯回答
清夢(mèng)

只能說這個(gè)設(shè)計(jì)太奇葩了，雖然可以實(shí)現(xiàn)。但是太難看了吧。想象一下最左邊的圖標(biāo)點(diǎn)出來(lái)是什么樣子。

實(shí)現(xiàn)思路就是計(jì)算出幾個(gè)連接點(diǎn)的坐標(biāo)，然后使用svg路徑圖片去覆蓋就行了。

2017年5月10日 09:02
編輯回答
青檸

如果只是線,用右側(cè)元素的兩個(gè)子元素,transform-orgin設(shè)置為100% 0,然后控制transform的scaleX,以及rotateZ就可以了.

如果還要陰影的話,估計(jì)就只能用svg或者canvas了.div+css想不到什么方案.

2017年6月14日 13:26
編輯回答
終相守

獲取點(diǎn)擊元素相對(duì)屏幕的位置，以及 右側(cè)詳情左上、左下兩個(gè)點(diǎn)的位置，可以用 canvas 去繪制，背景透明，或者使用 線調(diào)整長(zhǎng)度和傾斜角度

2017年9月19日 15:56
編輯回答
念初

非要畫的話，可以用 SVG，隨便找個(gè)教程吧，很簡(jiǎn)單，3條線的問題。

不過感覺這個(gè)設(shè)計(jì)不太好，現(xiàn)在屏幕大多比較寬，點(diǎn)擊左側(cè)然后內(nèi)容更新在右側(cè)有點(diǎn)浪費(fèi)，而且不利于響應(yīng)式。

2017年12月25日 09:15