Андрей Федоров

Линейный градиент
В вашем случае тут множественный линейный градиент. Один с наклоном по часовой стрелке, другой против часовой. Указываются через запятую в свойстве background-image.

Нет никакого смысла при таком позиционировании держать .child внутри .parent-2
https://codepen.io/aliencash/pen/YzqdOYd

Нужно поместить кнопку в обертку и спозиционировать ее абсолютно по отношении к обертке, а самой обертке задать размеры кнопки по умолчанию. Тогда на положение других элементов будет влиять только размер обертки, а размер самой кнопки не будет иметь значения.

В качестве вложенных кавычек попробуйте символы ` и \' (последнее используется как один символ).
Кроме того в font-name можно использовать названия шрифтов без кавычек, даже если в названии есть пробел.

Вижу 2 решения:
1. Найти библиотеку на js для определения браузера.
2. Использовать Google Fonts. По идее он должен сам подобрать необходимый шрифт для каждого конкретного браузера.

Что? https://codepen.io/aliencash/pen/bGVrZvq

С чего вы решили? Приведите пример кода.

Вот код подтверждающий что такого эффекта нет - https://codepen.io/aliencash/pen/ExVgWJz?editors=1100С

Дизайнера на кол. Картинками делайте.

Чистый css... К сожалению значения нужно подбирать и общий фон возможен только одноцветный (поверх картинки аватар нельзя разместить)
https://codepen.io/aliencash/pen/jObPZyV?editors=1100

.item {
  display: flex;
}
.item:nth-child(4n+2),
.item:nth-child(4n+3) {
  flex-direction: column;
}
.item:nth-child(4n) {
  flex-direction: row-reverse;
}