Готовый вариант
Создаем блоки и меняем им наклон,а внутри прописываем display: inline-block и противоположную трансформацию для текста,чтобы он был ровным.

transform: rotate(-45deg);

ща попробую сделать дать линк

Верстка заняла 1,5 часа:
CSS

Векторизация заняла 3 минуты:
Вектор

Каким методом пользоваться решать вам
если хотите поддержки на мобильных добавьте префексы.

div h4 {
    
    background: #009688;
    position: relative;
    display: inline-block;
    width: 100%;
    height: 0;
    padding: 50% 0;
    border-radius: 50%;
}
.outsideCircl{
  height:30%;
}

Создай див вокруг h4 и этому диву уже ширину задавай,а круг внутри него будет адаптивным

1. В вашем цикле for запускаются 3 setInterval() одновременно.
   
   

   for (var i = 0; i < pictures.length; i++){
   
      setInterval(function(){  
         $('body').css("background",pictures[i]);},5000);
      }
   }

   
   
   
   
2. Внутри цикла используется переменная i, которая передаётся внутрь анонимной функции, то есть это замыкание.
   

Согласно логике работы замыканий, значение этой переменной внутри анонимной функции будет равно значению, которое оно принимает по окончании работы цикла, то есть всегда 3.

Алгоритм можно реализовать несколькими способами, но проще всего использовать один интервал и в каждой итерации этого интервала инкрементировать счётчик.


Рабочий код с описанием

Надо было в настрйоках ВП (сбоку черная полоска) настроить пути