Как сделать неправильную форму в сети, чтобы использовать ее в качестве контейнера, чтобы одна часть могла включать контент?

Question

Я хочу совет передового опыта, как другие получают этот результат. Я хочу создать карточку как шаблон с неправильной формой. Моя идея состоит в том, чтобы создать его из двух частей: 1. Глава и 2. Содержание.

1. Голова имеет радиус поворота и поворота, я уже собрал код SVG. Имеет фиксированную высоту.

<svg>
    <path d="
             M0,60
             Q30,60 30,30
             A30 30 0 0 1 90,30
             Q90,60 120,60
             "/>
</svg>

2. Часть содержимого - это div с базовым радиусом угла. Div, потому что он может легко адаптировать контент. Высота этой части является динамической.

Вопрос прост: этот подход хорош или я должен делать это по-другому? Большое спасибо.