Круг в круге

[WhatIsHTML]

Хочу сделать вот такой кружок.

 

 

Додумался до такого (возможно есть способ попроще?). https://jsfiddle.net/z91cw96f/2/

Но проблема в том, что не могу нормально отцентрировать внешний круг относительно внутреннего. Помогите, пожалуйста

Если максимально приблизить, то круг видно более-менее по центру, но если максимально удаляться, то внешний круг сильно смещается.

[li4e]

https://jsfiddle.net/z91cw96f/3/

[by chris]

box-shadow сам просится

https://jsfiddle.net/z91cw96f/4/

[SelenIT]

Возможно, какие-то идеи отсюда помогут?

[Igor Schnaider]

box-shadow сам просится

https://jsfiddle.net/z91cw96f/4/

 

Но только для сплошного фона.

[by chris]

Но только для сплошного фона.

Вроде как можно

 https://jsfiddle.net/z91cw96f/5/

[Igor Schnaider]

 

Но только для сплошного фона.

Вроде как можно

 https://jsfiddle.net/z91cw96f/5/

 

 

Нет, я не о том. Не существенно, просто заметил.

[WhatIsHTML]

Возможно, какие-то идеи отсюда помогут?

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

https://jsfiddle.net/z91cw96f/6/

[by chris]

Я сделал по этой статье

Элегантное решение 

[Launder]

А просто радиальным градиентом ещё не предлагали?

[Launder]

Возможно, какие-то идеи отсюда помогут?

 

Вот к Вам и вопрос :-) Дело в том, что 100% для радиального градиента, это расстояние от центра до угла квадрата. Когда же мы углы срезаем, через border-radius: 50%, то радиусом нашего круга становится расстояние не от центра до вершины, а от центра до середины любой стороны.

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

Иными словами, проценты можно тупо делить на корень из двух и получим, в принципе адекватный результат (ну то есть 50%, которые хотим, делим на 1,41 и получаем примерно 35%, что и подставляем).

Но всё-таки это как-то криво.

Как же так красиво спозиционировать так, чтоб радиальный градиент считал 100% краем нашей окружности?

[SelenIT]

У радиального градиента же есть специальные ключевые слова типа farthest-side, чтобы указывать, расстояние до чего брать за 100%.

[vera17]

Можно  подключить иконочный шрифт. Если это переключатель слайдера или же чекбокс.