Сразу скажу спасибо за задание. Было интересно.
Решал задачу от общего к частному.
Первым дело надо пронумеровать все селекторы, а далее пытаться понять что каждый из них делает. Сразу же можно выделить две группы селекторов. Первая группа те, которые задают начальные точки позиционирования наших фигур, точка опора как раз то с чего стоит начать.
рисуем все.
Пытаемся к понять какая точка к чему относится в продакшн фигурах и от этого пытаемся понять логику примерную что было задумано автором.
в первом случае(слева направо) видим явно заданный элемент(значит сверху снизу будут бордюры,
во втором случае тоже какой-то явно заданный элемент но слишком большой, похоже на контнейнер, точно оверфлоу, значит обрезающий контенер в который надо поместить фигуру
С ромбом нет ничего кроме начальной точки. ну ясно два бордюра снизу-сверху
с октой - опять основа как в первом случае четко заданы размеры(пока не ясно что будет дальше и откуда берутся тупые края. так и хочется обрезающий контейнер но его нет) оставим на потом. Нужно больше собрать инфо… Все первой группе селекторов можно все проставлять.
Теперь надо разобраться со второй группой селекторов. их много, надо понять что каждый из них делает, составить список где будет видно наглядно их действие. Опять рисуем:
Теперь видим что каждый селектор делает.Стали просматриваться три подгруппы - первая задает цвет. вторая задает размеры, третья подсекает ненужные стороны бордюра ну и какие то из них занимаются позиционированием. Все это помогает дльаше понять что куда идет.
Начниаем тупо подбирать по размерам ну и чуть думая что вниз к before а что after, что надо подрезать а что надо покрасить и каким цветом. Собираем из этих списков как из кирпичиков то что нам надо. и рисуем опять. ту жде становится все ясно с октой. туопй край берется за счет добавления ширины 30 к элементу, подсказка (голубой цвет) ну куда еще первый селектор засунуть? голубой он и есть голубой то бишь окта. высота же псведо класса при этом остается нулевой.
Теперь ясно какому номеру какой класс соответствует.
Код вставлять не буду. ))