@webjuli

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

Нужно сделать такой адаптивный изгиб над логотипом, изгиб я вроде как сделала, но край неровный и изгиб не адаптивный, нужно чтобы при уменьшении/увеличении страницы изгиб оставался над логотипом. Как это лучше и правильно сделать? Изгиб белого блока я делала так, и у него край не ровный и он не адаптивный
.head {
background: radial-gradient(ellipse 190% 1300% at 25.2% 118%, transparent 5.5%, white 40px);
}
а овал просто нарисовала
.oval {
width: 265px;
height: 70px;
background: #969696;
border-radius: 50%;
color: white;
display: flex;
justify-content: center;
position: relative;
}
Первое изображение как надо сделать, второе и третье как я сделала. 5d766b41b6fa7857828532.png5d766b772b152652126625.png5d766bcfa9152501937496.png
  • Вопрос задан
  • 162 просмотра
Решения вопроса 1
OxCom
@OxCom
Попробуйте поиграться с этим.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@strelok011
если обтекание не равномерное (судя по скриншоту), то нужно добавить релативности на темносерый блок, а обтекание сделать на псевдоэлементе :before с абсолютным позиционированием.
Ответ написан
Задайте бордер у лого того же цвета что и подложка под ним.
{
border: 5px #CCC;
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы