I am trying to add 2 different background colors to the same css class.

.stepwizard-row:before {
    top: 14px;
    bottom: 0;
    position: absolute;
    content: " ";
    width: 100%;
    height: 4px;
    background-color: #d6d6c2;
    z-order: 0;

}

Is it possible to have one background color for the first 50%(Considering total width) and another background color to the remaining? If it can`t be achived, can anyone suggest me a trick to achive this?

Solution 1

Simply use linear-gradient as background and you can easily adjust the direction, colors, % of each color:

body {
  margin: 0;
  background: linear-gradient(to right, red 50%, blue 0%);
  
  height:100vh;
  text-align:center;
  color:#fff;
}
some content

body {
  margin: 0;
  background: linear-gradient(to bottom, red 60%, blue 0%);
  
  height:100vh;
  text-align:center;
  color:#fff;
}
some content

Or with pseudo-element and simple background-color then simply control the position/size of pseudo-element to control both background:

body {
  margin: 0;
  background: red;
  height: 100vh;
  position: relative;
  text-align:center;
  color:#fff;
}

body:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 50%;
  background: blue;
  z-index:-1;
}
some content

body {
  margin: 0;
  background: red;
  height: 100vh;
  position: relative;
  text-align:center;
  color:#fff;
}

body:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 40%;
  left: 0;
  right: 0;
  background: blue;
  z-index:-1;
}
some content

If you want more

You can combine different color inside gradient and also use multiple linear-background in order to achieve more complex color division for your background:

You can also do the same with pseudo element and also use some CSS transform (rotation, skew, etc):

Solution 2

You can use background gradients for that.

.stepwizard-row:before {
    background-image: linear-gradient(to right, #f00 50%, #ff0 50%)
}

Check this fiddle: https://jsfiddle.net/Lecazndk/

With that you can also create interesting effects and also use more than two colors.

https://jsfiddle.net/Lecazndk/1/

A good example of this usecase is the hero header on the Stripe website: https://stripe.com/

Solution 3

You can add a position relative div with pseudo class of absolute position at 50% height.

Example:

.the-double-color {
  height:100vh;
  background-color:red;
  position:relative;
  width:100%;
}

.the-double-color:before {
  content:'';
  background-color:blue;
  position:absolute;
  top:0px;
  height:50%;
  width:100%;
}

Here is the pen