Как закрасить фон по разделителю?

Question

[MentalControl]

Имеется разделитель, в виде svg элемента, на странице пробовал разместить его просто как блок, так и псевдо элементом.


Появился вопрос, как можно при ховере, допустим, изменить background ровно по этому самому элементу(чтоб цвет огибал, так сказать, полосу эту)?
Сейчас получается так, что background появляется и под этим "разделителем".
Подскажите в какую сторону копать, спасибо.

Comments

[Вадим]

В сторону clip-path

[Ankhena]

Ну или просто положить вниз SVG и раскрашивать как душе угодно.

[MentalControl]

Ankhena, а можно пример?
ибо не понимаю как сделать так чтоб часть левой половины залезла на правую(там где верхняя часть разделителя)

[Ankhena]

MentalControl, в SVG вы можете нарисовать детальки как вам нужно, хоть зигзагом, хоть змейкой. И при наведении изменять заливку fill или обводку stroke.