Подсветка менюшки/ссылки нестандартной фигурой на фоне

[torsar]

Сабж.

Как так сделать? (во вложении изображение - пример)

Первое, что приходит на ум, нарисовать картинку - фон и

на ней размещать ссылку - менюшку.

А может можно div трансфорнуть (css trnsform)?

Или  есть другие варианты?

Подскажите, как?

[wwt]

Простой вариант с помощью псевдоэлементов https://jsfiddle.net/1xrvch34/

Но не во всех случаях подходит.

[torsar]

Не могу понять, как это работает?

wwt, объясните пожалуйста :).

А в каких случаях не подходит?

 

[torsar]

Нагуглил :

https://jsfiddle.net/1xrvch34/2/

Йопта, не пойму, как это работает?

[wwt]

Так должно быть понятно https://jsfiddle.net/1xrvch34/3/

 

[torsar]

https://jsfiddle.net/1xrvch34/2/

А если мне надо вокруг этого треугольника рамку другого цвета?

Не квадратную, а именно треугольную рамку вокруг фигуры.

[wwt]

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