CSS Menu on Diagonal - html

Question

I am developing a layout of a mobile application, which will be developed in IONIC, the client sent us an example of how like he want the menu of the application, as you can see in the link below:
https://dribbble.com/shots/1701001-GIF-Exercise
Could you give me an idea how to get this result, from the diagonal menu, picking up the whole screen of the cell phone and keep the menu itens inside their colors?
I'm trying this, but i'm stuck here..
https://codepen.io/d3rsonbr/pen/bLvxgb
<div class="container">
<div>
<span>item1</span>
</div>
<div>
<span>item2</span>
</div>
<div>
<span>item3</span>
</div>
<div>
<span>item4</span>
</div>
<div>
<span>item5</span>
</div>
</div>
CSS:
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,400italic,300italic);
/* ====================================
Navigation
==================================== */
.overlay-navigation {
position: fixed;
z-index: 99;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: hsla(0, 0%, 100%, 0.2);
/*display: none;
opacity: 0;*/
}
nav,
nav ul {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
nav ul {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
list-style: none;
flex-direction: column;
}
nav ul li {
-webkit-flex-basis: 20%;
-ms-flex-preferred-size: 20%;
flex-basis: 20%;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
height: 100%;
overflow: hidden;
/*opacity: 0;
display: none;*/
/*-webkit-transform: rotate(-28deg);
-webkit-transform-origin: top left;
-moz-transform: rotate(-28deg);
-moz-transform-origin: top left;
-ms-transform: rotate(-28deg);
-ms-transform-origin: top left;
-o-transform: rotate(-28deg);
-o-transform-origin: top left;
transform: rotate(-28deg);
transform-origin: top left;*/
}
nav li a {
position: relative;
top: 20%;
color: #fff;
text-transform: uppercase;
font-weight: 300;
letter-spacing: 4px;
text-decoration: none;
display: block;
text-align: center;
font-size: 40px;
opacity: 1;
}
nav li a:before {
content: '';
width: 70px;
height: 2px;
background-color: #fff;
position: absolute;
top: 50%;
left: 0;
z-index: 100;
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
opacity: 0;
-webkit-transition: all .2s linear;
transition: all .2s linear;
}
nav li a:after {
content: attr(data-content);
font-size: 14px;
-webkit-transition: all .2s linear;
transition: all .2s linear;
opacity: 1;
position: absolute;
z-index: 100;
color: #fff;
display: block;
margin-right: auto;
margin-left: auto;
left: 0;
right: 0;
bottom: -25px;
text-transform: none;
font-family: 'Open sans', sans-serif;
font-weight: 600;
letter-spacing: 0;
}
nav li:nth-of-type(1) {
background-color: #29363B
}
nav li:nth-of-type(2) {
background-color: #EA495F
}
nav li:nth-of-type(3) {
background-color: #F4837D
}
nav li:nth-of-type(4) {
background-color: #FDCEA9
}
nav li:nth-of-type(5) {
background-color: #99B998
}
and this another one:
https://codepen.io/d3rsonbr/pen/XZEYKP