Есть такой дизайн
Как сделать по бокам такие овалы для меню сайта?
Имеется в виду этот овал
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществу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>
ширину/высоту/нужный параметр
можно менять угол скоса?
Дополню ответ от @Глеб Шапошников, а именно изменение поворота искривления:
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
можно менять "угол поворота" нашей кривульки.