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