Как сверстать такие элементы?

Question

[Alexandr1996]

Ребят, подскажите, пожалуйста, как верстаются такие элементы, если это возможно?

Конпки:


Кнопки при наведении:



Изображение:



Изображение при наведении:



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

Comments

[user-agent]

почему вы думаете, что нельзя сверстать псевдо элементами?

[Alexandr1996]

user-agent, покажите пример

[user-agent]

Alexandr1996, снизу вам уже написали пример с псевдоэлементами

Answer 1

[kryamk]

Answer 2

[Денис Инешин]

Начните изучение с CSS clip-path

Comments

[Alexandr1996]

мне нужны границы чтобы оставались при наведении, а clip-path их отсекает