Как создать анимацию обводки при наведении у объекта с частичным скруглением углов?

Question

[alexmaj467]

Здравствуйте.
Помогите понять или определится.
У меня div в нём a.
Место где находится div, предполагает что border-radius: 0 10px 10px 0;

Мне нужно чтоб при наведении на ссылку, начала бежать линия 1px по данному контуру, при убирании курсора также возвращалась в начало.

С прямыми углами нет проблем отыскать результаты. По типу самого нижнего варианта, где стрелочка.

Видел примеры не на двух элементах span как выше в примере, а на div. Но там проблема в том что анимация у меня должна быть не быстрая и только из одной точки. Вот оно, совсем не подходит при больших чем 5px углах и медленней чем 0.4 видно как элементы скругления накладываются.

Хотелось бы на CSS если это реально. На svg я могу это сделать, но не хочется.

Answer 1

[RAX7]

Comments

[alexmaj467]

Спасибо. с border-radius: 0 10px 10px 0; всё работает.

Можно к вам ещё вопрос.

Чтоб анимация начиналась и заканчивалась не началом и концом. Правильно только в hover править ? В пятом ребёнке вроде работает. А вот в первом не очень. В общем нужно clip-path рассмотреть, по идее если мне нужно всего 2 угла то и количество span можно уменьшить.
&:hover {
> span:nth-child(1) {
clip-path: polygon(50% 50%, 0 40%, 0% 0%);
> span:nth-child(5) {
clip-path: polygon(50% 50%, 0% 100%, 0% 60%);

[RAX7]

alexmaj467,

Чтоб анимация начиналась и заканчивалась не началом и концом

Т.е. чтобы контур был разомкнут? Поправил демку, должно быть похоже.

[alexmaj467]

RAX7, Спасибо. Править не нужно было. Я поставил Firefox чтоб увидеть полигоны. И вроде понял принцип работы.