3

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

введите сюда описание изображения

2 ответа 2

2

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

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

и др.

1
  • Дело в том что я не знаком с SVG, и мне нужно будет управлять изгибом из JS скрипта, если я реализую это через SVG ,это будет возможно?
    – Mr_Epic
    Commented 12 авг. 2015 в 8:31
1

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

#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/

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.