Как сделать срезанный угол css?

Question

[Иван Ерохин]

Как правильно реализовать такой срез на углу у блока?


Вот так просто я сделал через clip-path, но если добавляется тень/бордер - начинаются проблемы.


Решения из интернета основаны на фиксированных размерах блока, но уже если сайт на разных языках - меняется контент - меняются размеры. Такой вариант не подходит.

Может кто-то встречал правильный способ?

Comments

[Сергей Горностаев]

Этот вопрос задавался раза три или четыре за последний месяц. Правда, каждый раз заголовок у него был типа "Как сделать такое?", так что найти будет не просто.

Answer 1

[Daur Gamisonia]

Я сделал косой угол через CSS-треугольник, а border через градиент, вычислив гипотенузу: https://brofox86.github.io/cards-prototype/

Answer 2

[Vitaliy]

SVG

Answer 3

[Aleksei Podgaev]

Если поиграться вот с этим примером (убрать тени например), то можно получить то, что нужно:
https://css-tricks.com/snippets/css/tucked-corners/