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

#css #css3

                    
Здравствуйте, можно ли сделать вот такой прямоугольник (изогнутый что ли), на 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


    

Ответы

Ответ 1

Посмотрите в сторону SVG, возможно и с помощью css можно это сделать, но слишком
извращенно получится, скорее всего.

Для работы с SVG можете использовать одну из библиотек:


Tree.js
Svg.js
Path.js
D3.js


и др.


Ответ 2

Если доработать ваш пример, то можно добиться желаемого

#main::before{
    background-color: white;
    content: '';
    position: absolute;
    z-index: 3;
    top: 100%;
    left: -20%;
    width: 140%;
    height: 100%;
    margin-top: -15px;
    border-radius: 80%;
}
#main::after{
    background-color: #FFC107;
    content: '';
    position: absolute;
    z-index: 2;
    top: 5px;
    left: -20%;;
    width: 140%;
    height: 100%;
    border-radius: 80%;
}
#main{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    height: 75px;
    overflow: hidden;
    background: #ffc107;
    box-shadow: inset 0 40px white;
    transform: translateX(-50%)translateY(-50%);
}


https://jsfiddle.net/fliginskih/oprm6tsz/