Ну вообще можно сделать большое количество div, задать обводку, установить display - inline, повернуть их все на 45 градусов, вложить в другой блок установить ему overflow - hidden, и задать высоту так чтобы половина дивов была скрыта. Это об извращениях. А по человечески, нужно вырезать одни элемент этой полоски, сохранить в png. Поставить как фоновый элемент блока. И запретить повторение по вертикали(repeatY: no-repeat), соответственно повторение по горизонтали останется, и этот кусок линии будет повторятся до тех пор пока не закончится ширина бока.

out содержит текущее состояние переменной, к примеру "123", если ты выполнишь операцию out = mass[3], то заполнишь переменную четвертым значением(т.к. начинается с 0) массива mass в твоем случаи это 4. Как итог у тебя в этой переменной будет только это значение("4"), в js знак "+" является не только операцией сложения чисел, но и знаком конкатенации. То есть к строке out(с содержанием "123"), приклеиться еще и строка "4"(mass[3]) и в итоге получиться новая строка с содержанием "1234" и положиться в значение переменной out удалив предыдущее значение

при наведении на .menu__element псевдоэлементу :after ставиться ширина в 100 процентов. Тоже самое происходит с элементом имеющим одновременно 2 класса .menu__element и .active

Изображение заворачивается в ссылку(этот параметр есть при выводе галереи, ссылаться на страницу вложения или что то подобное). На js надо написать проверку ссылки, если ссылается на медиафайл, то перехватываем событие и вместо перехода выполняем открытие модального окна с изображением src которого равен адресу на который ссылается тег а