Ivan Bogachev

Z-index over9000 не нужен вообще. Это костыль, который некоторые люди, не понимающие css, используют для того, чтобы быть уверенными в том, что их элемент будет "сверху". При этом цивилизованные люди ограничиваются небольшими значениями z-index, с которыми проще работать. Иногда используют логические схемы вроде таких:

• 0-9 - в пределах компонента
  
• 10-19 - для всплывающих менюшек, подсказок и.т.д.
  
• 20-25 - для выезжающих меню, модалок и.т.д.
  

Можно ограничиться только диапазоном 0-9, но такая схема, хоть и является избыточной, позволяет проще ориентироваться в коде.

А те, кто говорит "Но если используются сторонние плагины, в которых элементы имеют большой z-index, а их надо перекрыть, то ничего другого не остается" в ответах выше ( mletov ) просто решают один костыль подпереть другим. Не стоит утверждать, что ничего другого не остается - в большинстве случаев предпочтительнее в такой ситуации использовать обертку (пример упрощен для наглядности):

<div class="my-div">My element</div>
<div class="wrapper">
    <div class="over9000">over9000</div>
</div>

div { position: absolute; width: 100%; }

.my-div   { background: #0f0; z-index: 2; }
.wrapper  { z-index: 1; }
.over9000 { background: #f00; z-index: 9999 !important; }

В такой ситуации "мой элемент" будет выше, чем "over9000".
codepen

Как отменить наследование

1em = размер шрифта родительского элемента
1rem = размер шрифта корневого ( :root ) элемента, в данном случае - это html

Вероятно вам необходимо использовать единицы rem.

Немного поправил ваш код:

.arrow {
  position: relative;
}

.arrow::before {
  content: '';
  display: block;
  width:  650px;
  height: 600px;
  background: blue;
}

.arrow::after {
  content: '';
  display: block;
  position: absolute;
  top:  0;
  left: 0;
  width:  600px;
  height: 400px;
  background: url(http://cliparting.com/wp-content/uploads/2016/05/Arrow-clipart-arrow-graphics-clipartcow-2.png);
}

Иван Карпущенко верно говорит, можно использовать transform:skew, но вот по поводу использования псевдоэлемента для текста - очень спорная мысль, точнее сказать не универсальная. Или придется этот текст передавать через data-атрибут, что будет довольно странным решением. Гораздо практичнее просто в button добавить span с текстом - codepen.

По вашим словам кажется, что вы понятия не имеете о том, какой инструмент для чего нужен. Так что рекомендую следующий план:

HTML: практика -> Pug или любой другой препроцессор -> понять зачем он нужен -> микроданные -> wai-aria
CSS: практика -> каждый день выкладывать один сверстанный компонент на CodePen -> всякое разное -> изучить внутренности normalize.css -> использовать autoprefixer -> изучать хорошие практики -> написать свою сетку -> познакомиться с БЭМ, RSCSS -> осознать полезность методологий -> препроцессоры (LESS проще, SASS моднее, есть еще много разных) -> PostCSS -> осознать разницу между пре-процессором и пост-процессором
JS: ES6+ -> Babel -> понять смысл инструмента -> писать много велосипедов -> много велосипедов -> больше велосипедов богу велосипедов -> паттерны проектирования -> тестирование
Gulp/Grunt и Webpack/Browserify: осознать разницу -> использовать по мере надобности -> научиться автоматизировать все, что можно автоматизировать
Git, NPM: без комментариев

А дальше, когда вы будете владеть тем, что нужно везде, уже встанет вопрос о ваших задачах. Существуют тысячи библиотек и фреймворков, каждый из которых хорошо решает одни задачи и плохо решает другие. Расширяйте кругозор и выбирайте инструменты исходя из задач.

Есть еще один дельный совет: читайте ответы на тостере и изучайте решения, которые народ предлагает. Разбирайтесь с тем, как они что-то делают. В перспективе сами отвечайте. Метод утенка рулит.

Ну и умение задавать вопросы тоже лишним не будет.

Вы задаете :root значение размера шрифта (кстати познакомьтесь с вот этой идеей - сам пользуюсь постоянно, замечательная вещь). По умолчанию обычно размер шрифта для :root в браузерах равен 16px. Задавать для :root размер шрифта в rem/em бессмысленно - это как масло масляное.

1rem (1 root em) будет равен тому размеру шрифта, который задан для :root и будет одинаковым для всех элементов на странице. Если вы вложите кучу элементов с font-size: 1.1rem друг в друга, то все они будут иметь один и тот же размер шрифта.

1em у каждого элемента будет свой, равный размеру шрифта родительского элемента. Если вы вложите кучу элементов с font-size: 1.1em друг в друга, то каждый следующий будет иметь размер шрифта больше, чем предыдущий.

---

Сам я стараюсь все, что можно, делать в rem (включая все размеры на странице, отступы, border-radius, брейкпоинты и.т.д.) в сочетании с адаптивной типографикой из вышеприведенной статьи, а единицу em использую очень редко. А размеры в пикселях - вообще редкость, только если 1-2px в местах, где округление может сломаться. Такой подход не является общепринятым, но может быть очень удобным, я его описывал в статье на хабре. Демка там получилась так себе, но с тех пор идея обкаталась и успешно применяется.

Имеете в виду particles.js? (чувствую, что да, вы уже задавали сегодня этот вопрос).

Подскажите, может какие нюансы есть...

Полезно прочитать инструкцию по использованию.

P.S.: Описание "не хочет работать" не дает представления о вашей проблеме. Соответственно не ожидайте, что кто-то угадает, что именно у вас не так.

Как говорится, ябзаверстал (за магические числа в примере ответственности не несу, был пьян).

Можно взять базовую разметку:

.project-timeline
    .step
        .number 1
        .content Lorem ipsum dolor sit amet.
    .step
        .number 2
        .content Lorem ipsum dolor sit amet.
    ....

С помощью CSS-трансформаций перевернуть половину элементов, а их содержимое перевернуть еще раз.


На маленьких экранах все повернуть еще раз.



---
CodePen

На главной странице в 728 строке stylesheet_custom.css подключается второй раз.

.generate-styles(3);

.generate-styles(@n, @i: 1) when (@i =< @n) {
  .style-@{i} {
    left: 50px + @i * 15px;
  }
  .generate-styles(@n, (@i + 1));
}

На выходе даст это:

.style-1 {
  left: 65px;
}
.style-2 {
  left: 80px;
}
.style-3 {
  left: 95px;
}