- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Frames and Triangles, Part 3</title>
<meta charset="utf-8">
<link rel="stylesheet" href="setting.css">
<link rel="stylesheet" href="style.css">
</head>
<body class="geometry">
<div class="arrow-top-right"></div>
<div class="arrow-bottom-left"></div>
</body>
</html>
CSS
[class^="arrow"] {
display: inline-block;
margin: 30px;
width: 0;
height: 0;
}
.arrow-top-right {
border: 100px solid #ffffff;
}
.arrow-bottom-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-top-right block:
- set the color of the upper border to
#0074d9, - make the bottom border thickness
0, - then set the right border thickness to
0, - and finally define the color of the left border as
transparent.
- Create a triangular arrow that is diagonally pointed down and to the left from the
.arrow-bottom-leftblock.
Comments