前端如何制作不规则的形状并在这个区域中hover弹窗？

Question

图中的粉色块代表一个商店，hover上去会显示商店详细的弹窗。一开始想的是用图片，但图片是个矩形区域，hover的话空白区域也会触犯，然后就想用css去实现，像平行四边形都好解决skew,梯形用border透明实现hover透明区域会触发hover肯定不行，还有一些奇葩图形，真想不出好的解决方法？

Answer 1

svg，area

Answer 2

svg 或者图像映射锚链 也就是<area>

Answer 3

可以使用svg

Answer 4

推荐你两个库咯
1.兼容IE的raphael---纯粹的SVG VML
http://dmitrybaranovskiy.github.io/raphael/ 
2.人们熟知的 D3
https://d3js.org/

祝早日解决问题