CODEWITHSUNDEEP
jqueryhtmlcss
Meules
Meules

Reputation: 1389

Make div partial coloured

I know this question is asked before and also with good answers, however I still can't get this to work.

What I try to do is make a div partial coloured. The problem I'm facing is that the coloured div needs to overflow a container div.

I'm talking about the blue part. The yellow lines indicate the container div. The blue div on the right actually is as long as on the left, so it spans the width of the page. So left need to be white and right need to be blue.

I tried several things like making the div fixed. That works but that makes the obviously fixed :)

Is there some easy way of accomplishing this? I prefer to do it with CSS instead of static image.

enter image description here

Upvotes: 0

Views: 99

Answers (1)

Paulie_D
Paulie_D

Reputation: 115288

Use a pseudo-element 

* {
  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

Upvotes: 1

Related Questions