0

Есть такой дизайн

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

Как сделать по бокам такие овалы для меню сайта?

Имеется в виду этот овал

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

3
  • о каком овале речь ? 12 мар 2019 в 14:21
  • Сделал правку в вопросе. Там самая нижняя картинка.
    – Denis
    12 мар 2019 в 14:24
  • щас отвечу в первом вопросе 12 мар 2019 в 14:30

2 ответа 2

0

div{
    width:300px;
    height:300px;
    position:relative;
    overflow:hidden;
}
div:before{
    content:'';
    position:absolute;
    left:70%;
    width:100%;
    height:100%;
    border-radius:100%;
    box-shadow: 0px 0px 0px 300px red; /*убрал белый цвет для большей наглядности*/
}
<div></div>

2
  • видоизмененный вариант из jsfiddle.net/webtiki/yefw4 12 мар 2019 в 14:24
  • Можете показать как меняя ширину/высоту/нужный параметр можно менять угол скоса?
    – DaemonHK
    13 мар 2019 в 7:41
0

Дополню ответ от @Глеб Шапошников, а именно изменение поворота искривления:

div{
    width:300px;
    height:150px;
    position:relative;
    overflow:hidden;
}
div:before{
    content:'';
    position:absolute;
    left:70%;
    width:100%;
    height:100%;
    border-radius:20% 50% 50% 50% / 60% 40% 80% 60%;
    box-shadow: 0px 0px 0px 300px #5fba7d;
}
<div></div>

Играясь с процентами в border-radius можно менять "угол поворота" нашей кривульки.

Ваш ответ

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

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