Ivan Bogachev

Абсолютное позиционирование, вырезание картинок, before/after... Ох и понапридумывают всякого...

.example {
    background: linear-gradient(to right, #F0F3BD, #F0F3BD), // левая граница
        linear-gradient(to right, #F0F3BD 0%, #F0F3BD 70%, #fff 70%, #fff 100%), // верхняя
        linear-gradient(to right, #F0F3BD 0%, #F0F3BD 70%, #fff 70%, #fff 100%), // нижняя
        linear-gradient(to right, #fff, #fff); // правая
    background-size: .5rem 100%, 100% .5rem, 100% .5rem, .5rem 100%;
    background-position: top left, top left, bottom left, top right;
    background-repeat: no-repeat;
}

Один элемент. Один фон. Для всего остального есть CSS.
codepen

1. CSS анимации, которые упомянули выше, стоит использовать осторожно - IE имеет проблемы с интеграцией их и SVG. Такой вариант не всегда подойдет.
2. SMIL... Процитирую MDN: "Chrome 45 deprecated SMIL in favor of CSS animations and Web animations". Пока все работает. Что будет дальше - кто его знает.
3. На VanillaJS делать хитрые анимации с SVG достаточно сложно. Вариант с генерацией CSS анимации из JS имеет те же проблемы, что и использование CSS анимаций в чистом виде.
4. Почему-то у нас народ любит хвалить GSAP. Но есть и другие инструменты, например Anime.js - меньше пафоса, свою задачу решает. Я бы отдал предпочтение второму варианту, но тут уж на вкус и цвет...

Можно нарисовать его градиентом (пример).

Вопрос к верстальщикам, которые передают верстку бэкэндерам

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

... over9000 lines of code ....
                            </div>
                        </div>
                    </div>
                    <!-- /slide -->
                </div>
                <!-- /custom-slider -->
            </div>
            <!-- /column -->
        </div>
        <!-- /row -->
    </div>
    <!-- /content-container -->
</div>
<!-- /page-container -->

Как вариант можно не начинать комментарий с новой строки, особенно если вы любите автоматическое форматирование. Такие комментарии позволяют быстрее ориентироваться в происходящем и меньше терять закрытые/не закрытые теги при нарезке на десяток файлов-шаблонов.

P.S.: И да, никто не заставляет писать их руками - Emmet может сам их генерировать.
P.P.S: А тем, кто считает бэкендеров "не тупыми, сами разберутся" стоит пожелать быть добрее к людям в новом году, некоторым из них приятно, когда сразу видно, какие блоки где заканчиваются. Также, как и нам приятно, когда в макете все красиво подписано.

Необходимо явно указать, какой шрифт должен использоваться:
font-family: FontAwesome;

На flexboxfroggy.com есть занятный набор упражнений.

В CSS имеется свойство clip-path, которое как раз придумано для этого, но браузеры пока с ним не особо дружат, а полифиллить все и вся - не лучшая идея. Так что можно просто нарисовать белую SVG-волну и вставить. Можно как фон, можно как картинку, особенно если хотите ее анимировать и превратить во что-то подобное.

В дополнение к статье Способы организации CSS-кода, упомянутой выше, добавлю еще ссылку на RSCSS.

Это стандартные радио-кнопки. Сами инпуты скрываются, а label для каждого из них стилизуется необходимым образом - пример.

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

Шаблон сделан на разрешение 3360х12078. Можно ли как нибудь изменить это разрешение до необходимого 1920х1014?

А почему вы решили, что там должно быть 1920? Не глядя кажется, что он в ширину не 1920 должен быть, а 3360/2=1680. А сделан в два раза больше только ради картинок для ретины. В чем проблема при верстке все размеры делать в 2 раза меньше? Тем более, что если макет нормальный, то многообразия размеров там не будет. Но если вы все же хотите поменять разрешение - вам нужно скачать полноценный фотошоп и поменять его там, assets не для этого предназначен.