Возможно ли сделать вот такой эффект?

Здравствуйте, можно ли сделать вот такой прямоугольник (изогнутый что ли), на CSS?

Получилось сделать с помощь наложения с верху и с низу овалов (белого цвета и оранжевого (как и сам блок)) ,но выглядит это не очень красиво: CSS:
#main::before{ background-color: white; content: ''; position: absolute; top: 100%; left: -54%; transform: translateX(50%)translateY(-50%); width: 104%; height: 65%; border-radius: 50%; } #main::after{ background-color: #FFC107; content: ''; position: absolute; top: -1%; left: -50%; transform: translateX(50%)translateY(-50%); width: 100%; height: 65%; border-radius: 50%; } #main{ border: 1px solid #ffc107; position: absolute; top: 50%; left: 50%; width: 50%; height: 75px; background: #ffc107; transform: translateX(-50%)translateY(-50%); }
jsfiddle

Ответ

Посмотрите в сторону SVG, возможно и с помощью css можно это сделать, но слишком извращенно получится, скорее всего.
Для работы с SVG можете использовать одну из библиотек:
Tree.js Svg.js Path.js D3.js
и др.