Петруша Укропов

Ничего сверхестественного там нет. Нужные блоки просто повернуты:

.d-bgd { 
transform: rotate(-15deg);
}

Вот описание htmlbook.ru/css/transform

Никак.

Обновить ие до 10.

Я учился в "А"-классе. В какой школе я учился?

:checked +span:after
Ты хоть понимаешь смысл написанного? + означает что ты хочешь обратиться к последующему элементу, в то время как спан находится перед чекбоксом.

jsfiddle.net/artishok/cksfssfp/1 дальше сами..

Никак. Если вам текст кажется маленьким - увеличивайте шрифт.

Если на странице несколько inline-block'ов, каждый из которых расположен с новой строки, то между ними будут некоторые промежутки.

Лечится указанием для элемента отрицательного отступа
margin-right: -4px;

habrahabr.ru/post/161581

mediaelementjs.com

z-index проставте

cssdeck.com/labs/thvtby2t

Почему-то мне кажется что такое меню есть на...

prostoprint.com or ua

Найдите напарника, который будет оживлять вашу верстку и сажать на движки, а вы только верстайте.

habrahabr.ru/post/126207

Дайте пользователю самому выбрать какую версию смотреть. Ненавижу когда это делают за меня.

jsfiddle.net/artishok/5Vjze по такому принципу делай

А что вы сделали сами? Раскрасили треугольники и поменяли имена классов?
cssdeck.com/labs/css-diamond