- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Creating a Complex Background – Part 2</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="pattern"></div>
</body>
</html>
CSS
.pattern {
margin: 100px auto;
width: 100px;
height: 100px;
background-color: #333333;
background-image:
linear-gradient(135deg, white 25%, transparent 25%),
linear-gradient(225deg, white 25%, transparent 25%),
none,
none;
box-shadow: 1px 1px 3px #333333;
}
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
Add two more gradients from white to transparent with a sharp transition at 25% to the .pattern block:
- The third gradient should be at an angle of
45°, - and the fourth should be at an angle of
315°.
Comments