Как средствами 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);
}
Теперь всё в порядке:
Мне часто в детстве говорили, что я очень добрый и милый…
В общем… сглазили, сволочи…
