0

I need some help with setting 50% of the div is color blue and the other 50% of the div is color red, horizontally. How can I do that? Thanks!

Ormocanon
  • 41
  • 5
  • 1
    There are very many ways to do that and (depending on the browser support requirement) the best would be to use a gradient with hard stops like in [this answer](http://stackoverflow.com/questions/27606260/blocky-gradient-effect-in-css3/27613861). You would need only two colors and stop at 50%. – Harry Sep 18 '15 at 16:32
  • Is using two divs a possibility? – Mario Pabon Sep 18 '15 at 16:34

4 Answers4

1

Might be over kill, but here it is http://jsfiddle.net/e9ypqy5t/6/

.repeat {
  width: 100px;
  height: 100px;
  background-image: 
    repeating-linear-gradient(
      180deg,
      blue,
      blue 50px,
      red 50px,
      red 100px 
    );
}

And here is the example using percentages http://jsfiddle.net/e9ypqy5t/8/

.repeat {
  width: 100%;
  height: 100vh;
  background-image: 
    repeating-linear-gradient(
      180deg,
      blue,
      blue 50%,
      red 50%,
      red 100%
    );
}

This method will allow you to also add more lines of color like this: http://jsfiddle.net/e9ypqy5t/10/

.repeat {
  width: 100%;
  height: 100vh;
  background-image: 
    repeating-linear-gradient(
      180deg,
      blue,
      blue 10%,
      red 10%,
      red 20%
    );
}
Adam Buchanan Smith
  • 9,422
  • 5
  • 19
  • 39
  • Thank you for the response, but there is a problem with adding contents inside the div. As I put some texts inside the div, the text overlaps. – Ormocanon Sep 19 '15 at 06:53
0

I'm guessing this may be of use to you in this case:

#divname {
 background:linear-gradient(#ff0000,#0000ff);
}
billy23lones
  • 25
  • 3
0

Pure css solution using :after pseudo selecter: http://jsfiddle.net/eLwdbgat/

div {
    width: 80%;
    height: 300px;
    background-color: red;
}

div::after {
    content:'';
    position: fixed;
    height: 300px;
    width: 40%;
    left: 40%;
    background: lightgrey;
}
Platte Gruber
  • 2,935
  • 1
  • 20
  • 26
0

You might be wanting a "gradient". Heres the code.

.box {
  height: 200px;
  width: 200px;
  /* fallback */
  background-color: #1a82f7;

  /* Safari, Chrome 1-9 */
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));

  /* Safari, Chrome 10+ */
  background: -webkit-linear-gradient(top, #2F2727, #1a82f7);

  /* Firefox*/
  background: -moz-linear-gradient(top, #2F2727, #1a82f7);

  /* IE */
  background: -ms-linear-gradient(top, #2F2727, #1a82f7);

  /* Opera*/
  background: -o-linear-gradient(top, #2F2727, #1a82f7);
}
<div class='box'></div>
Michael Barreiro
  • 328
  • 1
  • 3
  • 9