Как лучше нарисовать скошенный блок с закруглёнными углами?

Question

[Павел]

Приветствую. Есть, вроде-бы, простая задача, сделать блок с текстом, со скошенной стороной и закруглёнными углами.


Проблема в том, что блок должен быть в display: inline-block, и его высота и ширина - динамическая, зависит от кол-ва текста в блоке.
Переводил svg из фигмы в clip-path, получается простыня координат, и ладно, но clip-path не справляется по высоте, скос разный везде.

Может кто подскажите, как лучше реализовать данный блок?

Comments

[alexalexes]

Какая стратегия должна применяться к скошенной стороне при адаптивности?
а) сохранение угла скоса;
б) сохранение постоянной разности длин верха и низа.

[Павел]

alexalexes, угол скоса, я думаю, будет приемлемым вариантом...

[Александр Васильев]

пихнуть svg в background пробовал?

Answer 1

[AlexandraWeather]

tranform: skew не подойдет вам? задача не совсем понятная, но скос так делается)

Comments

[Павел]

Задача вроде как понятна, есть скриншот того, что нужно.

Если вы подскажите как сделать наклон одной стороны применив skew, я буду вам благодарен :)