Как вы можете создать этот расклешенный вид с помощью CSS или, если необходимо, SVG?

В идеале я хотел бы сделать это с помощью CSS3, но соглашусь для СВГ. Я могу сделать что-то похожее на это в CSS JSFiddle... но border-radius, похоже, не подходит для выделения изогнутых линий, как показано на изображении.

По сути, у меня есть блок заголовка, и я надеюсь создать более темную изогнутую область вверху.

Я был бы очень признателен за любую помощь со стороны любого умного гуру CSS. Спасибо!