Магический круг: CSS головоломка

Недавно начал пытаться учиться верстке HTML+CSS. Могу сказать только одно: жесть!

класс!

При наличии потомков в блоке, содержимое должно отображаться

Не очень понятен этот пункт. В потомке разноцветных блоков? Если так, то как он должен отображаться, если содержимого много?
И вообще если честно задание не очень понятно в плане логики… зачем так извращаться и почему такой частный случай?

Последнее очень оригинально!

Напоминает задачу

Напишите рассказ из слов, начинающихся на букву С.

Легко, но художественной ценности это не представляет.

Добавьте условие со звёздочкой. *Делать нужно левой рукой стоя на правой ноге сложив губы бантиком, но только обязательно бантиком!

В первом решении calc() не обязателен. Можно обойтись без него, если у box-footer/box-header отрезать уголки, как во втором способе, а оставшийся квадрат статичной ширины закрашивать градиетом через пвсевдо-элемент.

Если честно, мне совсем не импонируют попытки использовать css для отображения графически сложных объектов.
Вспомните Гомера Симпсона на css. Да красиво, но абсолютно бесполезно.

Еще чуть-чуть и можно будет просто взять и заюзать для этого маску.

Жаль что в реальной жизни верстальщика такие гениальные решения все еще разбиваются о заказчиковское «А добавьте еще поддержку IE8+»