CodePen

HTML

            
              <div class="wrap">
  <a href=""><div class="home">HOME</div></a>
<div class="arrow-down blue"></div>
</div>

<div class="wrap">
  <a href=""><div class="gallery focus">GALLERY</div></a>
<div class="arrow-down green"></div>
</div>

<div class="wrap">
  <a href=""><div class="service">SERVICES</div></a>
<div class="arrow-down orange"></div>
</div>

<div class="wrap">
  <a href=""><div class="about">ABOUT</div></a>
<div class="arrow-down ltblue"></div>
</div>

<div class="wrap">
  <a href=""><div class="contact">CONTACT</div></a>
<div class="arrow-down yellow"></div>
</div>

<div class="wrap">
  <div class="arrow-up blue"></div>
  <a href=""><div class="home">HOME</div></a>

</div>

<div class="wrap">
  <div class="arrow-up green"></div>
  <a href=""><div class="gallery">GALLERY</div></a>

</div>

<div class="wrap">
  <div class="arrow-up orange"></div>
  <a href=""><div class="service">SERVICES</div></a>

</div>

<div class="wrap">
  <div class="arrow-up ltblue"></div>
  <a href=""><div class="about">ABOUT</div></a>

</div>

<div class="wrap">
  <div class="arrow-up yellow"></div>
  <a href=""><div class="contact">CONTACT</div></a>
</div>
            
          
!
via HTML Inspector

CSS

            
              .arrow-down {
	width: 0; 
	height: 0; 
	border-left: 45px solid transparent;
	border-right: 45px solid transparent;
}
.arrow-up {
	width: 0; 
	height: 0; 
	border-left: 45px solid transparent;
	border-right: 45px solid transparent;
  transform: rotate(180deg);
  -ms-transform: rotate(180deg); /* IE 9 */
  -webkit-transform: rotate(180deg); /* Safari and Chrome */
  -o-transform: rotate(180deg); /* Opera */
  -moz-transform: rotate(180deg); /* Firefox */
}
.blue {
  border-top: 20px solid #24587a;
}
.green {
  border-top: 20px solid #c0d9b4;
}
.orange {
  border-top: 20px solid #fe8524;
}
.ltblue {
  border-top: 20px solid #b1d8ea;
}
.yellow {
  border-top: 20px solid #fdeb75;
}
.home {
  background-color:#24587a;
    height:40px;
  text-align:center;
  padding-left:5px;
  padding-right:5px;
  padding-top:20px;
  width:100%;
}
.gallery {
  background-color:#c0d9b4;
    height:40px;
  text-align:center;
  padding-left:5px;
  padding-right:5px;
  padding-top:20px;
  width:100%;
}
.focus {
  padding-top:60px;
}
.service{
  background-color:#fe8524;
    height:40px;
  text-align:center;
  padding-left:5px;
  padding-right:5px;
  padding-top:20px;
  width:100%;
}
.about{
  background-color:#b1d8ea;
    height:40px;
  text-align:center;
  padding-left:5px;
  padding-right:5px;
  padding-top:20px;
  width:100%;
}
.contact{
  background-color:#fdeb75;
    height:40px;
  text-align:center;
  padding-left:5px;
  padding-right:5px;
  padding-top:20px;
  width:100%;
}
a {
  color:#fff;
  text-decoration:none;
}
.wrap {
  width:80px;
  float:left;
  margin-left:15px;
}



            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................