- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Diagonals vs. Degrees</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="content">
<div class="gradient gradient-diagonal"></div>
<div class="gradient gradient-degrees"></div>
</div>
</body>
</html>
CSS
html,
body {
margin: 0;
}
.content {
margin: auto;
margin-top: 150px;
width: 350px;
}
.gradient {
width: 150px;
height: 150px;
box-shadow: 0 0 3px #333333;
}
.gradient-diagonal {
float: left;
background-image: linear-gradient(green, yellow, green);
}
.gradient-degrees {
float: right;
background-image: linear-gradient(green, yellow, green);
}
You’ve gone to a different page
Click inside the mini-browser to shift the focus onto this window.
Goalscompleted
0
- Set the direction of the
.gradient-diagonalblock gradient from
bottom left to the top right corner. - Assign a direction at an angle of
45°to the.gradient-degreesblock gradient. - Then increase the height of both blocks to
300px.
Comments