使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