Cоздать фигуру на CSS?

Question

[4e4en87]

Коллеги, не могу создать фигуру (изображение приложил) исключительно на css. Уже стал сомневаться возможно ли это. Пытался сделать одним большим кругом и псевдоэлементами по бокам, но не смог отрисовать эти псевдоэлементы. Разбить на зеркальные 2 фигуры (прямоугольник разделенный подобием арктангенсоиды) тоже не вышло.
Либо я сильно туплю и все очень просто, либо все очень сложно в этом случае? )

вокруг синего должна быть прозрачность, эта фигура на фоне с изображением лежит.

Answer 1

[Dima Polos]

Почему бы не нарисовать это в svg? потом перевести все это в base64, вот онлайн конвертер: b64.io/, и вставить в css фоном в куда надо, хоть в псевдоэлемент? Может гуру подскажут, как нарисовать все это, но мне кажется, что без картинки тут не обойтись..

Comments

[Dima Polos]

Даже если и есть решение, то очень сомневаюсь, что оно будет кроссбраузерное.

[Alexey]

Согласен. Правильный вариант использовать svg для отрисовки, а после можно на него css-ом влиять.

[Dima Polos]

Alexey, только вот не уверен, будет ли css работать, если в css вставлен svg... если в html, то 100%:)

[Alexey]

Dima Polos,
1) Кроссбраузерное будет полностью https://caniuse.com/#feat=svg
2) SVG это XML файл. Внутри есть теги. Эти теги могут иметь id, class на которые можно влиять с помощью CSS.
3) Я трассировал ваше изображение в SVG файл. Вот он https://codepen.io/rubinchyk/pen/NXjrwr

[Dima Polos]

Alexey,
1) то что svg кроссбраузерное это я знаю, я говорил, что ЕСЛИ, если есть другое решение, то вряд ли оно будет кроссбраузерное, а svg железобетон)
2) С svg умею работать, знаю про polygon, path, id, class, group и прочее, и в CSS умею с ними управлять, я говорил о том, что если svg не вставить в html, а подключить, например тегом img, или вставить фоном через css, то в DOM не будет классов и id из svg файла, поэтому теряем возможность управлять им через стили. Знаю, что тегом img точно не будут работать стили, а вот если вставить через css/base64, то не уверен, скорее всего тоже не будет(
3) Изображение не мое, я лишь отвечал, но спасибо большое! Думаю, автор вопроса оценит)

[Alexey]

Dima Polos, О, Дмитрий, вы в теме! Это очень хорошо!)

Там есть ограничения.

background-image не поддерживают CSS3-анимацию, даже если они встроены и вообще с анимацией могут быть проблемы, особенно в IE. Насколько я знаю CSS анимация пойдет, а вот SMIL не будет поддерживаться даже на уровне Edge к сожалению... + все это дело no responsive, media queries это свойство не поддерживает.

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

Ну и если вставлять на страницу svg, по-разному все будет и манипулироваться:
CSS управлять можно частично если вставлять как объект и шрифт с иконками. Тег IMG не позволяет влиять на SVG из CSS, но SVG анимации могут это делать, но в тоже время вот https://caniuse.com/#feat=svg-smil

[Alexey]

base64 тоже не все гладко https://css-tricks.com/probably-dont-base64-svg/

[Dima Polos]

Alexey, да, я svg люблю, и про smil много читал/смотрел. Ждем-с поддержки) Я вот с радостью бы использовал svg вместо того же fa-fa, но меня напрягают гигантские куски разметки внутри итак немаленькой разметки html, сворачивать в редакторе кода это вариант, конечно, но все равно, мне это не по душе. Спасибо, за информацию выше, что-то отметил для себя интересное!

[4e4en87]

Добрый день!
Спасибо за Ваш вариант. Определенно svg это рабочее и кроссбраузерное решение. Мне хотелось удовлетворить любопытство и нарисовать фигуру именно на CSS. У меня не получилось =)

[Dima Polos]

4e4en87, рад был помочь ☺ Если бы не эти волны по бокам фигуры, то на стилях можно бы нарисовать, а так, скорее всего нет, svg вообще классная штука.

Answer 2

[Anton Filippov]

Конечно изврат, но ради челенджа я сделаль) https://codepen.io/vicodin/pen/xpdENZ?editors=1100

Это для того, чтобы вы поняли суть, а уж тюнить под 100% картинку будете сами, играясь с размерами хелперов(белых кружков) и их позишнами

Comments

[4e4en87]

Спасибо большое за Ваше решение! Но немного не подходит, потому как эта фигура должна быть на прозрачном фоне =(

[Anton Filippov]

4e4en87, а, ну тогда свг, да :)
но мне всё равно было интересно реализовать, как только заметил суть картинки)