Как сверстать адаптивный диагональный слайдер с гексагонами на css?

Question

[Alsu Sh]

Добрый день! Имеются два полых круга, внутри которых необходимо реализовать адаптивный диагональный слайдер, состоящий из 5 гексагонов разных размеров, внутри которых текстовый контент. Внутри маленького круга по центру должен располагаться самый большой по размеру гексагон, на границе маленького круга по центру с двух сторон гексагоны поменьше, на границе большого круга еще 2 гексагона еще меньшего размера, чем предыдущие. Как расположить блоки так, чтобы они идеально выстроились по диагонали и были адаптивными? Спасибо! Ссылка на мои попытки: https://jsfiddle.net/8jpL7hdw/

Answer 1

[Максим]

https://codepen.io/topicstarter/pen/MNbgdK - вынес все размеры в переменные и адаптировал уже переменные

Comments

[Alsu Sh]

Спасибо!