- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Color-Stop Positions in Pixels</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(-45deg, #f00000 30px, #000000 30px, #000000 40px, #ff0000 40px, #ff0000 70px, #000000 70px);
}
.leaf-top-right {
/* colors: #00ff00, #000000, #00ff00, #000000 */
}
.leaf-bottom-right {
/* colors: #ffff00, #000000, #ffff00, #000000 */
}
.leaf-bottom-left {
/* colors: #ff00ff, #000000, #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;
width: 150px;
height: 150px;
background-color: #dfdfdf;
}
.flower {
margin: 70px auto;
width: 300px;
}
html,
body {
margin: 0;
padding: 0;
}
You’ve gone to a different page
Click inside the mini-browser to shift the focus onto this window.
Goalscompleted
0
Finish painting the flower using sharp gradients:
- Assign a gradient at an angle of
45°to the top right leaf. - Assign a gradient at an angle of
135°to the lower right leaf. - Assign a gradient at an angle of
225°to the lower left leaf.
The colors for the leaves are indicated in the comments in the CSS. The color-stop positions are the same as the ones used for the first leaf.
Comments