Как решить проблему со скошенным углом?

Question

[Vadim Bogomazov]

Доброго времени суток!

Есть блок со скошенным углом через псевдоэлемент и трансформации. При ховере на него нужно накладывать background-color с прозрачностью, но проблема в том, что на стыке с псевдоэлементом происходит накладывание бэкграундов. Какое есть решение данной проблемы?

Спасибо!

Ссылка jsfiddle

Answer 1

[MhMadHamster]

как-то так вышло
jsfiddle.net/6hwj9Le1/3

Comments

[Vadim Bogomazov]

Genius

Answer 2

[Александр Зачиналов]

нужно решать через border для псевдоэлемента так, как обычно и верстают треугольники codepen.io/danielsmcclintock/full/ljeis

Comments

[Vadim Bogomazov]

Не подойдет к сожалению, сам блок по дефолту тоже прозрачный. www.screencapture.ru/file/b013F334 вот так выглядит вся конструкция

[Александр Зачиналов]

оу((

[Александр Зачиналов]

никто конечно не запрещает использовать прозрачный бордер, но и тут неувязка, в дизе сама фигура имеет обводку, может на svg сделать?

[Vadim Bogomazov]

Александр Зачиналов: Если честно я полный нуб в svg, можете дать какой-нибудь гайд, чтобы быстро разобраться и сделать такую фичу?

[Александр Зачиналов]

дак а зачем гайд?) рисуете в кривых (обязательно в кривых, если есть фигуры то надо перевести) свою фигуру в любом векторном редакторе (inkscape - бесплатный), затем сохраняете ее в SVG, открывате в блокноте, по сути видите XML, задаете класс или ID как любому тегу в HTML, прогоняете через svgomg, копируете содержимое, вставляете в HTML и по вашему селектору работаете с ним как с любым блоком. Есть небольшие ньюансы при работе в IE и FF - об этом надо поискать инфу о preserveAspectRatio