Question

我正在开发一个移动应用程序的布局，它将在IONIC中开发，客户端向我们发送了一个他想要应用程序菜单的示例，如下面的链接所示：

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

你能告诉我如何从对角线菜单中获取这个结果，拿起手机的整个屏幕并将菜单保持在他们的颜色中吗？

我试过这个，但是我被困在这里..

<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
    }

另一个：

https://codepen.io/d3rsonbr/pen/XZEYKP

对角线上的CSS菜单

0 个答案: