鍍金池/ 問答/HTML5  HTML/ 前端如何制作不規(guī)則的形狀并在這個(gè)區(qū)域中hover彈窗?

前端如何制作不規(guī)則的形狀并在這個(gè)區(qū)域中hover彈窗?

圖中的粉色塊代表一個(gè)商店,hover上去會顯示商店詳細(xì)的彈窗。一開始想的是用圖片,但圖片是個(gè)矩形區(qū)域,hover的話空白區(qū)域也會觸犯,然后就想用css去實(shí)現(xiàn),像平行四邊形都好解決skew,梯形用border透明實(shí)現(xiàn)hover透明區(qū)域會觸發(fā)hover肯定不行,還有一些奇葩圖形,真想不出好的解決方法?

回答
編輯回答
嫑吢丕

svg,area

2017年7月2日 18:52
編輯回答
奧特蛋

svg 或者圖像映射錨鏈 也就是<area>

2017年12月21日 10:23
編輯回答
乖乖瀦

可以使用svg

2017年2月4日 17:15
編輯回答
哎呦喂
推薦你兩個(gè)庫咯
1.兼容IE的raphael---純粹的SVG VML
http://dmitrybaranovskiy.github.io/raphael/ 
2.人們熟知的 D3
https://d3js.org/

祝早日解決問題

2018年5月1日 13:58