Как сделать параллелограмм в CSS?
2 ответа
от
urban_will ,
2 года назад
@alfonso.heidenreich
Для создания параллелограмма в CSS можно использовать свойства transform и skew. Например, чтобы создать параллелограмм с углом наклона в 20 градусов, можно использовать следующий CSS код:
1 2 3 4 5 6 |
.parallelogram { width: 200px; height: 100px; background-color: blue; transform: skew(20deg); } |
В этом примере мы создаем блок с классом .parallelogram, который имеет ширину 200 пикселей и высоту 100 пикселей, а также синий цвет фона. Затем мы применяем к нему свойство transform с функцией skew, которая наклоняет блок на 20 градусов. Это приводит к тому, что блок превращается в параллелограмм.
Дополнительно можно использовать свойства transform-origin и perspective для настройки точки применения трансформации и глубины перспективы, чтобы создать более сложные эффекты.
15