Проблема с вёрсткой блочных элементов в списке

[FaTa1iTy_777]

Получается имеются блоки заказчик попросил чтоб блоки были подкошены как показано на картинке что ниже.
Ок сделал с помощью transform: skew(25deg);
после чего начались проблемы с позиционированием блоков при изменении изображения блоки разъезжаются подскажи пжлст что делать ? Я уже всё перепробывал

<div id="background-product">
	<ul class="products-list">
		<li><div><img src="icons/theman.png" alt=""><p>Дирекция</p><span><p>1C KPI,1C Монитор эффективности, 1С:Консалидация,</p><p>1С:Планирование Бюджета,1С:Рапорт руководителю</p></span></div></li>
		<li><div><img src="icons/postavshik.png" alt=""><img src="icons/arrow.png" alt="" class="arrow"><p>Поставщик</p><span><p>Управление целями поставок (SCM), 1С:Логистика,</p><p>1С:Управление торговлей(модуль закупки)</p></span></div></li>
		<li><div><img src="icons/settings.png" alt=""><p>Снабжение</p><span><p>Управление целями поставок(SCM)</p><p>1С:Логистика 1С:Склад 1С:Управление торговлей и торговым предприятием</p></span></div></li>
		<li><div><img src="icons/proiz.png" alt=""><p>Производство</p><span><p>Система управления ресурсами компании (ERP)</p><p>1С:Управление производственным предприятием,1С:Управление предприятием 2.0</p>
		<p>1C:Комплектация и сборка</p></span></div></li>
		<li><div><img src="icons/hand.png" alt=""><p>Продажи</p><span><p>Менеджмент продаж(SM)</p><p>1С:Управление торговлей и торговым предприятием</p></span></div></li>
		<li><div><img src="icons/client.png" alt=""><p>Клиент</p><span><p>Система управления взаимоотношения с клиентами (CRM)</p><p>1С:CRM</p></span></div></li>
		<li><div><img src="icons/money.png" alt=""><p>Финансы</p><span><p>1C:Бухгалтерия</p><p>1С:Комплексное управление финансами и бюджетирование</p></span></div></li>
		<li><div><img src="icons/search.png" alt=""><p>HR</p><span><p>1С:Зарплата и управление персоналом</p></span></div></li>
		<li><div><img src="icons/mancompany.png" alt=""><p>Юридический отдел</p><span><p>1C:Документооборот</p></span></div></li>
	</ul>
	</div>

.products-list li {
text-align:center;
-moz-transition: all 1.5s ease-out;
-o-transition: all 1.5s ease-out;
-webkit-transition: all 1.5s ease-out;
	-webkit-transform: skew(-25deg);
	-o-transform: skew(-25deg);
	-moz-transform: skew(-25deg);
padding:0px;
margin:0px;
float:left;
display:inline-block;
text-align:left;
width:20%;
color:#fff;
}
.products-list li:first-child{
height:200px;
width:100%;
margin:0px;
padding:0px;
margin-left:6.5em;
}


.products-list li:first-child div{
	color:#fff;
background: #0067a0;
	width:60%;
	}
	.products-list li:first-child div span p {
	display:none;
color: #fff;
text-align: center;
text-indent: 0px;
-moz-transition: all 3s ease-out;
-o-transition: all 3s ease-out;
-webkit-transition: all 3s ease-out;
cursor: pointer;
margin-left:1em;
margin-top:1em;
font-size:1em;}
.products-list li:first-child div p {
font-size:2em;}
	.products-list li:first-child img {
	display:inline-block;
	width:auto;
	height:auto;
float:left;
margin:2em 2em 0 2em;
}
	
.products-list li div {
	z-index:2;
	position:relative;
	color:#fff;
	background-color: #ccc;
color: #333;
text-align: center;
text-indent: 0px;
-moz-transition: all 1.5s ease-out;
-o-transition: all 1.5s ease-out;
-webkit-transition: all 1.5s ease-out;
cursor: pointer;
margin:auto;
text-align:center;
	font-weight:bold;
	height:250px;
}

[FaTa1iTy_777]

Блин поторопился..... само вдхновение пришло и ручкой по листу я сочиняю что проблему закрываю ну для не просвещённых я обернул всё в section задал transform:srew(25deg) а у чего надо выровнил и уаля эскюз муа всё получилось и неровности ушли

[Naive]

там на фоне правильные треугольники: угол должен быть 30 градусов

[SQLPowerUser]

FaTa1iTy_777, тут можно упростить вёрстку, а картинки выводить через background-image. Располагаем на блоке через background-position, и если надо, регулируем размер background-size. Тогда вёрстка не сломается.
Результат https://jsfiddle.net/wpot22yh/embedded/result/
Исходники https://jsfiddle.net/wpot22yh

[Вадим Мошев]

Сообщение от Naive

там на фоне правильные треугольники: угол должен быть 30 градусов

Ты хотел сказать "равносторонние"? Тогда, не 30, а 60...