Как доработать кружок?

Question

[frontAng]

чтобы получить как на скрине ( но без использования before)

https://jsbin.com/botoyepiwa/edit?html,css,output

Comments

[Ankhena]

1. Взять SVG
2. css.yoksel.ru/radial-gradients
css.yoksel.ru/linear-gradients
3. https://doka.guide/css/box-shadow/

По дороге подумать, зачем для центрирования абсолют.

[frontAng]

Ankhena, а что не так в данном случае с абсолютом?

[Ankhena]

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

Answer 1

[Сергей delphinpro]

Comments

[frontAng]

Сергей delphinpro , всё-равно есть проблема. Фон у псевдо с кружком я не могу задать ( из-за этого в кружке видно линию)
https://jsbin.com/wawixefuvu/edit?html,css,output

[Сергей delphinpro]

frontAng, Это не проблема.
просто сдвиньте линию.

[Сергей delphinpro]

frontAng, или белый фон в кружке, чтобы он перекрывал линию. То есть кружок получится из синего фона, белого бордера и красного box-shadow

[modelair]

Сергей delphinpro, цвета - супер :)

Answer 2

[imko]

Диву фон, афтеру размер меньше дива на толщину внешней синей границы, у афтера прозрачный фон и бордер - светлая граница

Comments

[frontAng]

imko, не могу div фон. В этом и суть