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

[@BOOTor]

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

[@Grox]

Начал пытаться или начал учиться?

[@BOOTor]

Можно сказать, уже учусь: за неделю проштудировал на Codecademy курсы по питону, HTML+CSS, сейчас мучаю JavaScript. Блин, интересно то как! Надо второе высшее получать дистанционно :)

[@workmi]

класс!

[@Grammka]

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

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

[@ilusha_sergeevich]

codepen.io/hugo/pen/mIvfz
На верхнем левом блоке в footer пропишите текст, он будет «под цветом» и его не видно.

[@Grammka]

boxes should be able to contain text; if you come up with a solution that makes this impossible, it's not enough

Тут скорее лучше перевести «Блоки должны иметь возможность содержать текст, в противном случае ваше решение неверно», тогда смысл понятен.

[@SoNTesT]

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

[@PapaBubaDiop]

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

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

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

[@Makcym]

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

[@Dzorogh]

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

[@yadobr]

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

[@GreatRash]

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

[@AddAloner]

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

[@Dzorogh]

Для IE8 должен срабатывать fallback. Круг просто пропадет. Начиная IE9 все работает нормально.