努力创建一个导航栏，其中有角度的 div 堆叠在一起

Question

我是一名努力编写代码的视觉设计师，切入正题，问题如下：

我要实现的目标：

目标 1 和目标 2 的屏幕截图，包括我目前的困境，我在下面放了一个 link（因为我是新手，还不允许包含屏幕截图：

https://www.dropbox.com/s/libc4wp970xz3ms/Screenshot.png?dl=0

我希望实现的是让导航栏始终居中。我把它变宽了（1300px），我的白色容器会变小，它外面的任何东西都会被设置为隐藏。

下面是我的代码：

    <!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Example Page</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="apple-touch-icon" href="apple-touch-icon.png">
        <link rel="stylesheet" href="css/screen.css">
    </head>
    <body>
        <div class ="main-container">
            <div class = "banner-container">
                <div class="cyan-banner"></div>
                <div class="green-banner"></div>
                <div class="magenta-banner"></div>
                <div class="orange-banner"></div>
            </div><!--end of .banner-container-->
        </div><!--end of .main-container-->
    </body>
</html>

@import 'normalize';
@import 'susy';
@import 'compass';

$susy : (
  columns: 12, 
  debug: (image: show),
  output: overlay
);

.main-container {
    @include clearfix;
    @include container(1200px);
    height: 100vh; // Forces wrap to full height.

  // Mobile
  @media (max-width: 419px) {
    @include show-grid(1);
  } 

  // Changing to a 4 column grid
  @media (min-width: 420px) {
    @include show-grid(4);
  }    

  // Changing to a 8 column grid
  @media (min-width: 841px) {
    @include show-grid(8);
  } 

  // Changing to a 12 column grid
  @media (min-width: 1200px) {
    @include show-grid(12);
  }
}

// Color Theme
$cyan: #148ec3; $magenta: #c9197a; $orange: #de8826; $green: #008a52; $gray: #a1a1a0;

body {
    background: #d2d2d2;
}

.main-container {
    background: white;
}

.banner-container {
    @include clearfix;
}

.banner-container > div {
    width: 1300px;
    position: fixed;
    top: 50px;
}

.cyan-banner {
    height: 60px;
    background: $cyan;
    z-index: 5;
}

.green-banner {
    height: 60px;
    background: $green;
    z-index: 4;
    @include transform(rotate(2deg));
}

.magenta-banner {
    height: 60px;
    background: $magenta;
    z-index: 3;
    @include transform(rotate(4deg));
}

.orange-banner {
    height: 60px;
    background: $orange;
    z-index: 2;
    @include transform(rotate(-2deg));
}

如有任何帮助或建议，我们将不胜感激。

我一直在论坛上搜索答案和线索，但似乎找不到与我有类似问题的。

再次感谢。

安东尼

Answer 1

有一个导航和几个旋转和平移（并适当定位）的伪元素。

html,
body {
  height: 100%;
}
.container {
  width: 80%;
  height: 100%;
  overflow: hidden;
  margin: 0 auto;
  border: 1px solid black;
}
nav {
  height: 75px;
  background: steelblue;
  margin-top: 75px;
  position: relative;
}
nav:before {
  content: '';
  position: absolute;
  width: 150%;
  height: 100%;
  background: orange;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)rotate(-2deg);
  z-index: -1;
}
nav:after {
  content: '';
  position: absolute;
  width: 150%;
  height: 100%;
  background-image: linear-gradient(to bottom, magenta 0, magenta 25%, green 25%, green, 75%, magenta 75%, magenta);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(3deg);
  z-index: -1;
}

<div class="container">
  <nav></nav>
</div>

请注意，目前 'green' 区域仅在较大的屏幕尺寸下可见，但媒体查询可以增加旋转。或者，我们可以用更精细的梯度来做一些事情。

努力创建一个导航栏，其中有角度的 div 堆叠在一起

Struggling with creating a navigation bar with angled divs that are stacking on top of each other

css

positioning

sass

susy

compass