Добрый день. Нужно сделать вот такое нехитрое меню:


сделал вот так: https://jsfiddle.net/hushL4bk/
т.е. левый border без наведения белый, при наведении весь border нужного цвета. Вроде бы ничего, но выглядит вот так:


как я понимаю, это из за того, что границы обрезаются по диагонали, а не ровно. Подскажите, как можно это решить?

А зачем в `ненаведенном` состоянии граница синяя? Это она и проглядывает. Сделай белую,как у картинки с углом.
Кстати, есть почитать про псевдоэлементы  before и after- то же самое можно сделать и без картинок.

элементы должны быть одинаковой высоты. Сделать белую можно, но получается вот так:




знаю, лень было )

https://jsfiddle.net/9j4am9z6/
Ну если вот такое не пойдет - нужно будет читать про псевдоэлементы.

Отлично подходит. Спасибо.