Как сделать область наводки исключительно в области геометрической фигуры?

Question

[Руслан Тимурзиев]

В данном случае это ромбики. Дело в том, что элементы хоть и выглядят ромбами, но в html коде это все-равно прямоугольные области, естественно. Поэтому иногда приходится прицеливаться, чтобы активировать нужный ромб. Мне один программист сказал, что есть какое-то свойства в border, которое определяет углы.
Как быть?

Comments

[Everything_is_not_so_bad]

Лично мне не нравится когда мне нужно целиться в тонкую фигуру для её активации. Может это дело вкуса.

Answer 1

[Ankhena]

Не видно по картинке как оно у Вас сверстано.

Я бы делала, например, так: https://jsfiddle.net/Lmz2pya6/

Answer 2

[Максим]

codepen.io/anon/pen/BQPqZV вроде бы так , но надо доработать , появляется нижняя граница при наведени

Answer 3

[Everything_is_not_so_bad]

В SVG элементы позволяют сделать такое сделать без участия JS. Нужно только в CSS стилях прописать свойства заливки и контура.