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

Question

[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;
}
Первое изображение как надо сделать, второе и третье как я сделала.

Answer 1

[OxCom]

Попробуйте поиграться с этим.

Comments

[webjuli]

решение хорошее, но у меня на фоне картинка, там узор есть, поэтому если сделать border цветом, то его будет заметно, а на задании ,border как бы прозрачный и вместо цвета там видно задний фон с узором

[OxCom]

webjuli, обновил codepen. идея в clip-path. Дальше играйтесь с процентами и media query.

Answer 2

[strelok011]

если обтекание не равномерное (судя по скриншоту), то нужно добавить релативности на темносерый блок, а обтекание сделать на псевдоэлементе :before с абсолютным позиционированием.

Comments

[webjuli]

извините, можете написать конкретнее? я немного исправила вопрос, дописала как сделала арку, градиентом, получилось похоже, в промежутке между лого и белым блоком видно задний фон с узором, но неравномерная линия границы, и еще нет адаптивности.

[strelok011]

Перечитал внимательнее (в просветах должен быть задний фон с узором), Вам нужно тогда использовать clip-path.
https://css-tricks.com/clipping-masking-css/ (тут же есть ссылка на генератор контура для обрезания)
https://css-tricks.com/almanac/properties/c/clip-path/ (внизу список статей с примерами)

Либо svg-маски css.yoksel.ru/svg-masks

Так же я бы предложил попробовать другой подход в конструировании фона для шапки с включенным логотипом. Возможно, использовать одну фигуру для обрезанного прямоугольника с овалом.

В любом случае - для адаптивности (к примеру, если логотип у вас для десктопа находится слева, а для мобильного отображения по центру), нужно добавить в стили брекпойнты медиа-запросов с изменением центрирования логотипа и модифицированным clip-path для обрезания от центра. Все же информации не достаточно, чтобы точно предложить решение.

Answer 3

[Александр Гамов]

Задайте бордер у лого того же цвета что и подложка под ним.

{
border: 5px #CCC;
}

Comments

[webjuli]

фон у меня картинка с узором, если поставить цвет на border то будет заметно