将Div区域调整为背景img大小

Question

我没有找到任何解决此问题的方案，但我确信存在一个。

我有4张div个背景图片，一起包含一个图形选项轮。

问题是每个div的背景图像都是三角形的，但div占用的区域更大并且是正方形。当我将光标移过每个div时，它不能很好地工作，因为第一个div重叠在第二个之上，第二个重叠在第三个之上，等等。

我考虑使用z-index，但这不起作用，因为第一个和第二个div相互重叠，第三个和第四个重叠。

我不确定我是否已经很好地解释了我的问题。如果您不明白，请告诉我。

这是一张图片，可以帮助您理解我的意思。

谢谢！

使用代码更新

这是我的代码：

https://jsfiddle.net/ialex90/x7mx1zqu/

Answer 1

您只能通过SVG实现此效果。请参阅以下基本实现，该实现说明了如何使用SVG将CSS和JS应用于不规则形状：

＆＃13;

＆＃13;

$('path').click(function(e) {
  alert(e.target.id);
});

＆＃13;

path {
  stroke:red;
  stroke-width:1;
  fill:rgba(255,0,0,0.15);
  transition:fill 0.5s;
}
path:hover {
  fill:rgba(255,0,0,0.5);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg viewBox="0 0 500 250" width="500" height="250">
  <g>
    <path id="quadrant1" d="M0,250 A250,250 0 0,1 73,73 L161,161 A125,125 0 0,0 125,250 z" />
    <path id="quadrant2" d="M73,73 A250,250 0 0,1 250,0 L250,125 A125,125 0 0,0 161,161 z" />
  </g>  
</svg>

＆＃13;

＆＃13;

＆＃13;