jquery - 使div部分着色

Question

我知道之前有人问过这个问题并且答案也很好，但是我仍然无法让它工作。

我尝试做的是使一个 div 部分着色。我面临的问题是彩色 div 需要溢出容器 div。

我说的是蓝色部分。黄线表示容器 div。右边的蓝色 div 实际上和左边的一样长，所以它横跨页面的宽度。所以左边需要是白色，右边需要是蓝色。

我尝试了几种方法，例如固定 div。那行得通，但这显然是固定的:)

有什么简单的方法可以做到这一点吗？我更喜欢用 CSS 而不是静态图像。

Answer 1

使用伪元素

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.container {
  width: 50%;
  margin: auto;
  height: 100vh;
  border-left: 1px solid green;
  /* for reference */
  border-right: 1px solid green;
  /* for reference */
}
.mybar {
  height: 50px;
  background: lightblue;
  position: relative;
}
.mybar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  background: inherit;
  height: 100%;
  width: 50vw;
  z-index: -1
}

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

JSFiddle Demo