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

Question

[Лариса]

Всем хорошего дня/вечера/ночи)

Есть вот такая заморочка


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

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

Всем спасибо)

Comments

[r_mustang]

для круга используйте псевдоэлементы :before и :after и абсолютное позиционирование

у одного будет белый фон, красная обводка и больший радиус, а у другого красный фон и меньший радиус.

[Лариса]

нет круга, это утрированно показан логотип
полоса красная должна быть на всю рабочую область экрана ри рабочей ширине сайта например 1000px

Answer 1

[profesor08]

Круг и дуга снизу это svg, плоски это псевдоэлементы шириной 99999px. Можешь обойтись без svg, но тогда придется делать несколько враперов для круга, чтоб сначала отобразить круглую обводку, потом белую, потом перекрыть круглую чтоб была дугой.

Comments

[Brad9aga]

а кто мешает хоть бордером бахнуть этот полукруг

[profesor08]

Brad9aga, это и мешает, сначала сам проверь что получится.

Answer 2

[Антон Усачев]

Чистый css. Размеры и позиционирование можно подогнать. И это не единственный способ, просто самый несложный.

Comments

[Brad9aga]

в точности как я и предпологал

[Лариса]

Ребята, это очень интересные примеры, но абсолютно не то

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

[Антон Усачев]

Лариса, выложи макет посмотреть.

Answer 3

[AndersDir]

Прозвучит, вероятно, как дичь, но просто не делайте этого.

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

Да, общение с дизайнером тоже часть работы верстальщика.