css - 仅在居中的 div 的一侧提供背景颜色

Question

所以，我有一个位于居中的 div 内的菜单。居中的 div 具有背景颜色。现在我想给左浏览器窗口边框和居中的 div 之间的间隙提供另一种颜色，而不是另一侧的间隙。我已经尝试了几种方法，例如线性渐变或使用::before 添加彩色框，但没有任何效果。 Here is a picture to visualize it

<style>
 .wrapper {
  width: 100%
 }

 .centered {
  margin: 0 auto
  max-width: 80em
  background-color: grey
 }
</style>

<div class="wrapper">
 <div class="centered">
  <nav>Some menu...</nav>
 </div>
</div>

Answer 1

您可以尝试在 .wrapper 上使用突然的 linear-gradient，例如:

background: linear-gradient(to right, red 5%, white 90%, gray 5%);

只需编辑颜色后的百分比即可调整大小。

在这里给你写了一个例子。简洁大方。

http://jsbin.com/qivagowutu/edit?html,css,output