CSS Menu on Diagonal

Question

CSS Menu on Diagonal

Navigation

#1 by (3 votes)
#2 by (1 votes)

1

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

link

Could you give me an idea how to get this result, from the diagonal menu, picking up the whole screen of the cell phone?

html css ionic

asked by anonymous 19.02.2018 / 21:27

2 answers

what is the best way to make a query case_sensitive Check if checkbox is selected in the input

score 3 · Answer 1

You can use the rotate property of CSS3 below is an example The effects you can use are 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 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

score 1 · Answer 2

Edit

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>

Do to only do 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>