Магически кръг CSS пъзел

Ще можете да се гримирате по този начин предвид следните правила?

За да не бъдете много мързеливи - рамката вече е там.

Няма да запълня мястото в тази публикация с тривиални стилове, които отразяват и позиционират блокове. Ще обознача само появата на кръг в самия център, идентичен във всички примери:

Метод първи: радиален градиент

Трябва да зададете правилни радиални градиенти с цвят и непрозрачност за всички елементи на долния колонтитул за горните полета и всички елементи на заглавката за долните полета. На пръв поглед това е най-тривиалното решение, но има обрат, който използва CSS calc (), за да го направи отзивчив:

Метод втори: рамка за псевдоелементи

Мисля, че това е най-гениалното решение. За елементите на горния и долния колонтитул, в съответствие с всеки от блоковете, задайте полето в желаната посока. След това за всеки раздел и заглавка с долен колонтитул създаваме псевдоелементи:

---