Alejandro Lora Alejandro Lora - 3 months ago 13
AngularJS Question

Adapt Div area to Background img size

I haven't found any solution for this problem but I'm sure that one exists.

I have 4

div
s with background images, together comprising a graphical option wheel.

The problem is that each
div
's background image is triangular, but the area that is occupied by the
div
is bigger and is a square. When I pass the cursor over each
div
, it is not working well, because the first
div
overlaps on top of the second, the second over the third, etc.

I thought about using
z-index
but that won't work because the first and the second div overlap one another, and so do the third and fourth.

I'm not sure if I've explained my problem very well. If you don't understand something, please let me know.

Here is an image to help you understand what I mean.

enter image description here

Thanks!!

UPDATE WITH CODE

Here is my code:

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

Answer

You can only achieve this effect with SVG. See the following base implementation that illustrates how you can both apply CSS and JS to irregular shapes using SVG:

$('path').click(function(e) {
  alert(e.target.id);
});
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);
}
<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>