html {
font-family: 'Open Sans', sans-serif;
}
body {margin: 0;
padding: 0;
}
#wrapper {
padding-left:50px;
padding-top:30px;
}
#third, fifth {
background-color:#E8E8E8 ;
}
img[src^="my_menu.png"] {
z-index:10;
}
#second, #third, #fourth, #fifth {
width:100%;
height:100vh;
padding:0px;
margin:0;
margin-left:auto;
margin-right:auto;
background-color:white;
z-index:-1;
}
#second {
width:100%;
height:100vh;
padding:0px;
margin:0;
margin-left:auto;
margin-right:auto;
margin-top:100vh;
}
#fourth, #second {
background-color:grey;
}<!DOCTYPE html>
<html>
<head>
<title>Add gospel Přerov</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="wrapper">
<div id="second">
</div>
<div id="third">
</div>
<div id="fourth">
</div>
<div id="fift">
</div>
</div>
</body>
</html>We're in the process of developing a website for a client and we've run into a design challenge. We have created four divs with a height of 100vh and a width of 100%. Now, we need to add downward-facing arrows to each div, positioned at the bottom center. Does anyone know how we can achieve this?