Question

Очень сложно обеснить что я хочу сделать так как точного название мне не известно.

Буду говорить на примере, вот кнопка  для меню (изображение которое является ссылкой). И мне нужно сделать так чтобы половину изображение можно было перекрыть , а именно части где я нарисовал красный крестик что бы при на жатая в данные точки ссылка не работала.
Я пробую сделать это геометрическими фигурами из CSS, но мало что в них понимаю, и вот хочу узнать возможно ли или как это сделать. 
Может другими способами, другим изображением?

--
Вот я допустим делаю триугольниками зеленый цвет можно будет сделать прозрачным это понятно. Но там где синий если я делаю прозрачным кнопку оно перекрывает, можно ли сделать так что-бы синия часть триугольника была не только прозрачной но и что-бы её вобще небыло, только зеленый, или может как-то делать синию часть тоже ссылкой.

В принцепе что самое главное это чтобы моё изображение было ссылкой, а там где белый фон ссылкой небыло.

--
Вот тут пример!
https://jsfiddle.net/u0nj4vzL/1/

_

 Yuri_Geruk 

Скорее всего не понятно что я тут написал 
Если ебе не сложно помоги, я опишу еще подробнее.

Answer 1

Пробуйте https://jsfiddle.net/v2r20jd5/