Ксения Михайлова

After-элемент с градиентой заливкой

попробуйте сказать про max-width && max-height для самого изображения:

.imgli img {
  max-width: 100%;
}

Подключайте файл стилей на хук login_enqueue_scripts

А в login_head, получается, нужно подключать инлайновые стили

Если вам заранее известны размеры div, можно установить изображение как background-image, и использовать background-size.

А чем вас настолько не устраивает skew?
Можно нарисовать svg. Будет весьма растягиваемо и не мыльно.

Можно исхитриться нарисовать треугольники border'ом у before/after-элементов, но настолько узкого контентного блока у вас не получится.

Можно сделать их инлайн-блоками с vertical-align: bottom, но тогда верхняя граница будет гулять

Я в таких случаях обычно js присваиваю всем блокам в одной линии высоту одну высоту.

Только имейте в виду, что проценты считаются от ширины элемента www.w3schools.com/cssref/pr_margin.asp

Если у вас высота формы зависит от высоты соседней колонки - то, возможно, стоит использовать джаваскрипт для задания высоты.

скорее всего, у вас в самом шрифте baseline для отдельных символов поломана

Можно убирать верхнюю границу у первых пяти (верхнего ряда) элементов
codepen.io/anon/pen/xGQOmZ

Netbeans умеет компилировать при сохранении, если в системе установлен nodejs и less.
А вообще ставлю в проект lessphp, и сайт сам при изменении less файла компилирует его в css

Синий цвет задает ссылка, поэтому вам надо писать что-то вроде li:hover a {background: red;}

справа белая полоса? внутренние элементы "выпирают" за пределы body, имеют большую ширину, чем контейнер )

Читала немного у Чикуёнка про reflow/recalculation

...существование определённых свойств у элемента, которые принудительно вызывают пересчёт стилей

Возможно, это пригодится.

Вы же вчера задавали такой же вопрос! :)
Добавьте data-атрибут option'ам, и по событию change изменяйте что вам надо.