Как адаптивно заверстать сложный блок из различных фигур и текста внутри?

Question

[eafedorow]

Каждый элемент внутри блока (ромб, треугольник) может содержать в себе текст по центру. Имеет ховер эффект в виде подсветки фигуры (опять же ромб или квадрат). Также весь блок должен быть свёрстан отзывчиво и растягиваться или стягиваться с сохранением пропорций. Очень нетривиальная для меня задача. Буду благодарен если поможете советом, примером, ссылкой на похожее решение.

Comments

[Ankhena]

Нужно всего лишь вспомнить о том, что есть относительные единицы измерения. Такие как vw, vh, vmin, vmax и %.
И также calc.

И ещё, что расчет % у разных свойств идет от разных величин. Например, у координат (top, left) от размера родителя, а вот в трансформе от самого элемента.

Аналоги (которые мне лень переделывать под каждый из таких вопросов)
https://codepen.io/AnnaSummer/pen/QWQOvzy
https://codepen.io/AnnaSummer/pen/eYVeWXR (красная заливка лишь для того, чтобы было понятно как это работает)

И всегда есть SVG. Один раз нарисовал и масштабируй и подсвечивай сколько угодно.