DIV with color division

0

I would like to know how I can make my div to have this color division:

Thank you in advance.

    
asked by anonymous 07.07.2015 / 15:50

1 answer

1

You will need to use CSS linear-gradient .

The linear-gradient

linear-gradient is a feature of CSS3 to create gradients between 2 or more colors inline.

So you will need to use the following code to generate this background on your div

.gradientbg{
    background: #f6f5f4;
    background: -moz-linear-gradient(-45deg, #f6f5f4 0%, #f6f5f4 50%, #ffffff 51%, #ffffff 100%);
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#f6f5f4), color-stop(50%,#f6f5f4), color-stop(51%,#ffffff), color-stop(100%,#ffffff));
    background: -webkit-linear-gradient(-45deg, #f6f5f4 0%,#f6f5f4 50%,#ffffff 51%,#ffffff 100%);
    background: -o-linear-gradient(-45deg, #f6f5f4 0%,#f6f5f4 50%,#ffffff 51%,#ffffff 100%);
    background: -ms-linear-gradient(-45deg, #f6f5f4 0%,#f6f5f4 50%,#ffffff 51%,#ffffff 100%);
    background: linear-gradient(135deg, #f6f5f4 0%,#f6f5f4 50%,#ffffff 51%,#ffffff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f5f4', endColorstr='#ffffff',GradientType=1 );
  border: 1px solid #000;
  height: 100px;
  width: 100%;
}
<div class="gradientbg"></div>
    
07.07.2015 / 16:18