Как сделать параллелограмм с градиентом в CSS?
2 ответа
от
emanuel_boyer ,
2 года назад
@angelica.glover Сделать параллелограмм с градиентом в CSS, можно следующим образом:
HTML:
1 2 3 |
<body> <div id="parallelogram"></div> </body> |
CSS:
1 2 3 4 5 6 7 |
#parallelogram {
background: linear-gradient(to left, red 20%, blue 40%, yellow 60% );
width: 150px;
height: 100px;
margin-left: 25px;
transform: skew(20deg);
}
|
от
rachel ,
год назад
@angelica.glover
Вы можете создать параллелограмм с градиентом в CSS, используя свойство transform для наклона элемента, а также свойство background для настройки градиента.
Вот пример кода:
1 2 3 4 5 6 |
.parallelogram { width: 200px; height: 100px; background: linear-gradient(to bottom right, #ff0000, #ffff00); transform: skewX(-20deg); } |
В этом примере мы задали ширину и высоту элемента, а также настроили градиент с помощью свойства background. Градиент начинается с красного цвета и заканчивается желтым цветом, проходя по диагонали элемента. Затем мы используем свойство transform для наклона элемента на 20 градусов влево, создавая параллелограмм.
Вы можете настроить цвета и угол наклона под свои потребности, чтобы создать желаемый эффект параллелограмма с градиентом.
15