- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Frames and Triangles, Part 2</title>
<meta charset="utf-8">
<link rel="stylesheet" href="setting.css">
<link rel="stylesheet" href="style.css">
</head>
<body class="geometry">
<div class="arrow-bottom"></div>
<div class="arrow-left"></div>
</body>
</html>
CSS
[class^="arrow"] {
display: inline-block;
margin: 30px;
width: 0;
height: 0;
}
.arrow-bottom {
border: 100px solid #ffffff;
}
.arrow-left {
border: 100px solid #ffffff;
}
You’ve gone to a different page
Click inside the mini-browser to shift the focus onto this window.
Goalscompleted
0
Change the frame of the .arrow-bottom block:
- set the color of the top side area to
#0074d9, - make the bottom border thickness
0, - and set the color of the left and right borders to
transparent.
- Create a triangular arrow pointing to the left from the
.arrow-leftblock.
Comments