CSS Menu on Diagonal

Question

I am developing a layout of a mobile application, which will be developed in IONIC, the client sent us an example, how I would like it to be the menu of the application, as you can see in the link below:

https://dribbble.com/shots/1701001-GIF-Exercise

Could give me an idea of how to get this result, from the menu on the diagonal, taking the entire screen of the mobile phone?

Answer 1

You can use the CSS3 Rotate property below follows an example The effects you can use Jquery and Css @frame Animation

In your thml

<div class='celular'>
    <div class="transversal-bg">
        <div class='bar-one rotate'>

        </div>
        <div class='bar-tow rotate'>

        </div>
        <div class='bar-three rotate'>

        </div>
  </div>
  <div class='menu-setter'>

        <div class='menu-icon'>
              Icon
        </div>
        <div class='menu-icon'>
              Icon
        </div>
        <div class='menu-icon'>
              Icon
        </div>
    </div>
</div>

Css You can adapt just made a small example

.celular{float:left;width:160px;height:240px;background:pink}
.transversal-bg{float:left;width:100%;height:100%;overflow:hidden}
.rotate {
     -ms-transform: rotate(-33deg); /* IE 9 */
     -webkit-transform: rotate(-33deg); /* Safari */
     transform: rotate(-33deg); /* Standard syntax */;
     margin-left: -50px;}
.bar-one{float:let;width:160%;height:33%;background:red}
.bar-tow{float:let;width:160%;height:33%;background:orange}
.bar-three{float:let;width:160%;height:33%;background:#00bfff}
.menu-setter{position: absolute;width: 160px;}
.menu-icon{position:relative;width:100%;text-align:center;height:33%;line-
height: 480%;}

You can see an example working here

Answer 2

Edith

This is the solution that I believe has the best result, has less code, uses only a linear-gradient and is easier to add new items

html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.container {
	width: 15%;
	height: 80%;
	overflow: hidden;
	background: linear-gradient(15deg, red 33%, yellow 33%, yellow 66%, green 66%);	
}
.container div {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	height: 33.333%;
}

<div class="container">
	<div>
		<span>item1</span>
	</div>
	<div>
		<span>item2</span>
	</div>
	<div>
		<span>item3</span>
	</div>
</div>

Can only be done with CSS using skwedY()

html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.container {
width: 25%;
height: 90%;
overflow: hidden;
background-color: tomato;	
}
.container div {
	width: 100%;
	background-color: gold;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	height: 33.333%;
	transform: skewY(15deg);
	transform-origin: left;
}
.container div:first-of-type {
	background-color: tomato;
}
.container div:last-of-type {
	background-color: turquoise;
}
.container div > span {
	transform: skewY(-15deg);
}

<div class="container">
	<div>
		<span>item1</span>
	</div>
	<div>
		<span>item2</span>
	</div>
	<div>
		<span>item3</span>
	</div>
</div>