Функция skewX задает скос элемента
по оси X, превращая тем его в параллелограмм.
Используется совместно со свойством transform.
Значением свойства служит угол в любых единицах
для углов. Угол может быть как положительными,
так и отрицательными. Положительное значение
делает скос влево, отрицательное - вправо.
Скос осуществляется вокруг точки, задаваемой
свойством transform-origin.
Синтаксис
селектор {
transform: skewX(угол);
}
Пример
В данном примере блок скошен на 30
градусов влево:
<div id="elem">lorem ipsum</div>
#elem {
transform: skewX(30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
Пример
В данном примере блок скошен на 30
градусов вправо:
<div id="elem">lorem ipsum</div>
#elem {
transform: skewX(-30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
: