Antony Bark

Ну не всем это далось и они ушли в backend ))

Я обычно раздаю классы с помощью js.
Самое простое:

$("a.trs").click(function (e) {
          event.preventDefault();
          var linkLocation = this.href;
          $('body').addClass('load');
          setTimeout(redirectPage, 1000);

          function redirectPage() {
            window.location = linkLocation;
          }
        });

Но вроде не работало в мозиле. Ну и не получается конечно бесшовных переходов, если, разве что не сделать странице opacity: 0 в конце

Со слайдерами вообще все просто — использую один из самых простых slick и анимации пишу сам с помощью transform

сами ромбики можно сделать так:

div {
margin: 27px 0;
width: 100px;
height: 55px;
background: #F1CCAE;
position: relative;
}
div:before, div:after {
content: "";
width: 0;
height: 0;
position: absolute;
left: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
div:before {
top: -25px;
border-bottom: 25px solid #F1CCAE;
}
div:after {
bottom: -25px;
border-top: 25px solid #F1CCAE;
}

Для мобильных поясняющий текст к иконке можно убрать и показывать его при наведении на иконку.
И разместить в три столбца: в левом три шестиугольника друг под другом, в среднем - верхний - центральный шестиугольник уменьшенного размера-нижний , в правом - оставшиеся три шестиугольника. В этом случае позиционированием можно не пользоваться, а разметить страницу на 3 блока по 33.3333333333%, внутри которых будут размещены одинаковые многоугольники. И конечно же сначала делать верстку под мобильные устройства.

Сделайте в виде SVG-иконок. Они могут масштабироваться без потери качества.

vincentgarreau.com/particles.js

10 stylish hover effects

Если правильно вас понял, то примерно такое вам нужно. codepen.io/Kublyakov/pen/KzmvVX
При наведении меняем цвет, и за счет transition цвет меняется не сразу, а постепенно, в моем случае в течение 0.5 секунд. Думаю, смысл понятен и сможете доработать для своих целей.

Сделать квадрат псевдоэлементом, и повернуть уже его.
Как уже верно подметил Александр А, если применять трансформацию к тексту, он будет отображаться немного некрасиво. Однако делать квадрат из двух треугольников тоже незачем.

Кризис идентичности пикселя
Почему EM?

Поставить svg width="100%" height="100%
не?

Бутстрап - это извращение, которое придумали программисты, не умеющие верстать :)))
Единственное применение этому Фреймворку - верстка админок и интерфейсов.
Если нужен фронтэнд, то верстайте ручками, качественно и надежно.

обычно хватает этих:
vovanr.com/frontend-elements-dictionary

У Корела более понятный интерфейс для новичка и более простая learning curve.
"Для дома для семьи" он зачастую проще и удобнее. Илл более хардкорно-профессиональная программа.