Как правильно сверстать такой блок?

Question

[Марина]

Как правильно сверстать такой блок и написать стили?
Красный блок по центру, а зеленые расположены по кругу.

Comments

[Ivan Ustûžanin]

если прямо совсем по кругу, то относительно недавно появившаяся в css тригонометрия

[Марина]

IvanU7n,
Нужно, чтобы поддержка была браузерами.
Я вижу вариант только position: relative и position: absolute, но думаю есть более правильное решение

[Ivan Ustûžanin]

Марина, а количество зелёных фиксированное? если да, то должна помочь небольшая магия с grid: 3 столбца и 7 строк с последующим разложением блоков по этой сетке

[Марина]

IvanU7n,
Да, фиксируемое. Зеленых 6, а красный 1
Проблема, что html разметка должна быть такой

[Ankhena]

Марина, по аналогии:

https://jsfiddle.net/Ankhena/z516pbms/

Answer 1

[Ivan Ustûžanin]

Comments

[Kentavr16]

Хорошее решение.

[Ivan Ustûžanin]

Kentavr16, иногда дизайнеры всякое рисуют, так что извращенства с гридами можно сказать мой конёк )

[Kentavr16]

IvanU7n, мне на ум пришло только transform rotate, так что рад что есть у кого поучиться.

Answer 2

[Максим]