CSS, псевдоэлементы. Как скруглять внешние углы?

Question

[Влад]

Короче, есть примерно вот такой макет:


Если делать внешние углы с помощью псевдоэлементов, то как закруглить гипотенузу треугольника?
Вот пример: https://codepen.io/vlad-tarasoffka/pen/bGyqvbV

Спасибо

Comments

[Ankhena]

Радиальными градиентами
https://jsfiddle.net/Ankhena/xjpefyq0/

https://codepen.io/AnnaSummer/pen/gOQVxBR
https://jsfiddle.net/Ankhena/wj102v8e/2/
https://jsfiddle.net/Ankhena/wkdfngyu/
и т.д.

[Влад]

Ankhena, спасибо, вроде бы разобрался.

Непонятно только как сделать такое обтекание с такими градиентными уголками в зависимости от длины строки заголовка внизу слева как на макете, при том что вёрстка будет сажаться на CMS-ку и заголовок может быть разным.
Разбирать заголовок с помощью javascript-а что-ли, каждую строку пихать в отдельный блок и прописывать им разные свойства? Шизофрения какая-то.

[Ankhena]

Влад, вот еще есть для раздумий https://jsfiddle.net/Ankhena/Lacmztdk/
Это древняя песочница, в ней написано, что только в хромах, но это уже не так.

[Влад]

Ankhena,

Я так понял, что всё дело в свойстве box-decoration-break: clone ?
Кстати, вот чего по этому свойству https://caniuse.com/?search=box-decoration-break
Нужно сделать для h1 border-radius: 0 13px 13px 0
и поскольку бордер-радиус у него задаётся для всех строк, то этот этот h1 нужно засунуть в обёртку и уже для неё создать псевдоэлементы с градиентными уголками. Правильно я рассуждаю?

Answer 1

[Растишка]

Белый фон запечь в картинку.
Перестать сотрудничать с дизайнерами которые сами не умеют верстать и придумывают неверстаемую херню.