- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Градиенты под углом</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="flower">
<div class="leaf leaf-top-left"></div>
<div class="leaf leaf-top-right"></div>
<div class="leaf leaf-bottom-left"></div>
<div class="leaf leaf-bottom-right"></div>
</div>
</body>
</html>
CSS
.leaf-top-left {
background-image: linear-gradient(135deg, #ff0000, #000000);
}
.leaf-top-right {
/*градиент от #00ff00 к #000000*/
}
.leaf-bottom-right {
/*градиент от #ffff00 к #000000*/
}
.leaf-bottom-left {
/*градиент от #ff00ff к #000000*/
}
.leaf-top-left,
.leaf-bottom-right {
border-radius: 0 50%;
}
.leaf-top-right,
.leaf-bottom-left {
border-radius: 50% 0;
}
.leaf {
float: left;
margin: 0;
width: 150px;
height: 150px;
background-color: #dfdfdf;
}
.flower {
margin: 0 auto;
padding-top: 80px;
width: 300px;
}
html,
body {
margin: 0;
height: 100%;
}
Вы перешли на другую страницу
ЗадачиВыполнено
0
Завершите раскраску цветка с помощью градиентов:
- Верхнему правому листку задайте градиент под углом
225°
. - Нижнему правому листку задайте градиент под углом
315°
. - Нижнему левому листку задайте градиент под углом
45°
.
Цвета листков указаны в комментариях в CSS.