Question

我是一名挣扎于编码的视觉设计师，切入追逐，下面是问题所在：

我想要实现的目标：

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

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

使用一个导航和一对旋转和平移（以及适当定位）的伪元素。

＆＃13;

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

＆＃13;

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

＆＃13;

请注意，目前绿色＆＃39;区域仅在较大的屏幕尺寸下可见，但媒体查询可以增加旋转。或者，我们可以使用更精细的渐变来做某事。

苦苦挣扎着创建一个带有角度div的导航栏，这些div叠加在彼此之上

1 个答案: