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

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

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

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

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

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

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

Обърнете внимание на: преди за .box-alpha, който няма ширина или височина. Спомнете си как всички ние правехме CSS стрелки или триъгълници, като използвахме контура. Същият принцип тук.

---