css

Как средствами CSS сделать наклонный DIV? Довольно просто. Исходный DIV:

Мне часто в детстве говорили, что я очень добрый и милый…

В общем… сглазили, сволочи…

С помощью такого кода:

.skew {
	-webkit-transform: skewX(-15deg); 
	-moz-transform: skewX(-15deg); 
	-ms-transform: skewX(-15deg); 
	-o-transform: skewX(-15deg); 
	transform: skewX(-15deg); 
}

Превращаем в наклонный:

Мне часто в детстве говорили, что я очень добрый и милый…

В общем… сглазили, сволочи…

Видите проблему? Всё, что находится внутри DIV будет так же наклонено. Вряд ли это то, чего мы хотели добиться. Избавиться от этого легко: надо наклонить содержимое DIV в обратную сторону. Но есть одна тонкость: наклонять надо только прямых потомков! Так что в файл стилей надо дополнительно добавить стили для селектора .skew > *:

.skew > * {
	-webkit-transform: skewX(15deg); 
	-moz-transform: skewX(15deg); 
	-ms-transform: skewX(15deg); 
	-o-transform: skewX(15deg); 
	transform: skewX(15deg); 
}

Теперь всё в порядке:

Мне часто в детстве говорили, что я очень добрый и милый…

В общем… сглазили, сволочи…