Css 正在努力创建一个导航栏，其中有角度的div堆叠在彼此的顶部_Css_Sass_Positioning_Compass_Susy

Css 正在努力创建一个导航栏，其中有角度的div堆叠在彼此的顶部

css sass

Css 正在努力创建一个导航栏，其中有角度的div堆叠在彼此的顶部,css,sass,positioning,compass,susy,Css,Sass,Positioning,Compass,Susy,我是一名视觉设计师，努力编写代码，切入主题，问题如下：我正在努力实现的目标：目标1和目标2截图，包括我目前面临的困境，我在下面放置了一个链接（因为我是新手，现在还不允许包含截图：我希望实现的是让导航栏始终居中。我把它调宽了（1300px），我的白色容器会变小，它之外的任何东西都会被设置为隐藏下面是我的代码： <!doctype html> <html class="no-js" lang=""> <head> <

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

我正在努力实现的目标：

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

我希望实现的是让导航栏始终居中。我把它调宽了（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));
}


示例页
@进口“正常化”；
@输入‘susy’；
@进口"指南针";；
$susy：(
栏目：12，
调试：（图像：show），
输出：叠加
);
.主货柜{
@包括clearfix；
@包括容器（1200px）；
高度：100vh；//强制包裹到全高。
//流动的
@介质（最大宽度：419px）{
@包括显示网格（1）；
} 
//更改为4柱格线
@介质（最小宽度：420px）{
@包括显示网格（4）；
}    
//更改为8柱格线
@介质（最小宽度：841px）{
@包括显示网格（8）；
} 
//更改为12柱格线
@介质（最小宽度：1200px）{
@包括显示网格（12）；
}
}
//色彩主题
$青色：#148ec3；$洋红：#c9197a；$橙色：#de8826；$绿色：#008a52；$灰色：#A1A0；
身体{
背景：#d2d2d2；
}
.主货柜{
背景：白色；
}
.横幅容器{
@包括clearfix；
}
.banner容器>div{
宽度：1300px；
位置：固定；
顶部：50px；
}
.青色旗{
高度：60px；
背景：青色；
z指数：5；
}
.绿旗{
高度：60px；
背景：绿色；
z指数：4；
@包括变换（旋转（2deg））；
}
洋红旗{
高度：60px；
背景：洋红；
z指数：3；
@包括变换（旋转（4deg））；
}
.橙色横幅{
高度：60px；
背景：橙色；
z指数：2；
@包括变换（旋转（-2deg））；
}

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

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

再次感谢你

Anthony

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

html，
身体{
身高：100%；
}
.集装箱{
宽度：80%；
身高：100%；
溢出：隐藏；
保证金：0自动；
边框：1px纯黑；
}
导航{
高度：75px；
背景：钢蓝；
边缘顶部：75px；
位置：相对位置；
}
导航：以前{
内容：''；
位置：绝对位置；
宽度：150%；
身高：100%；
背景：橙色；
最高：50%；
左：50%；
变换：平移（-50%，-50%）旋转（-2deg）；
z指数：-1；
}
导航：之后{
内容：''；
位置：绝对位置；
宽度：150%；
身高：100%；
背景图像：线性渐变（至底部，品红0，品红25%，绿色25%，绿色75%，品红75%，品红）；
最高：50%；
左：50%；
变换：平移（-50%，-50%）旋转（3deg）；
z指数：-1；
}

谢谢你，Paulie！我想我可以处理这个问题，有很多可能性。