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

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

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

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

Может кто-то встречал правильный способ?
  • Вопрос задан
  • 3582 просмотра
Пригласить эксперта
Ответы на вопрос 3
BroFox_86
@BroFox_86
Я сделал косой угол через CSS-треугольник, а border через градиент, вычислив гипотенузу: https://brofox86.github.io/cards-prototype/
Ответ написан
Комментировать
Ni55aN
@Ni55aN
SVG
Ответ написан
Комментировать
alexiusp
@alexiusp
senior frontend developer
Если поиграться вот с этим примером (убрать тени например), то можно получить то, что нужно:
https://css-tricks.com/snippets/css/tucked-corners/
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы