Diagonal lines in CSS

Question

I want to create a div which divided by diagonal line into two parts. The left side should be yellow (for example) and the right side should be blue. How Can I do it?

Thanks.

(please run the code below to see example of what I'm talking about).

<html>
<body>
<p>
******************************************<br>
**********************....................<br>
*********************.....................<br>
********************......................<br>
*******************.......................<br>
******************........................<br>
*****************.........................<br>
******************************************<br>
</p>
</body>
</html>

possible duplicate of [Two-tone background split by diagonal line using css](http://stackoverflow.com/questions/14739162/two-tone-background-split-by-diagonal-line-using-css) — jbutler483, Dec 11 '14 at 11:34

score 1 · Accepted Answer · answered Dec 11 '14 at 11:38

This can be easily accomplished by using CSS3 Gradients

Take a look at the following code:

p .diagonal{
background: #1e5799;
background: -moz-linear-gradient(-45deg,  #1e5799 50%, #fff600 50%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(50%,#1e5799), color-stop(50%,#fff600));
background: -webkit-linear-gradient(-45deg,  #1e5799 50%,#fff600 50%);
background: -o-linear-gradient(-45deg,  #1e5799 50%,#fff600 50%);
background: -ms-linear-gradient(-45deg,  #1e5799 50%,#fff600 50%);
background: linear-gradient(135deg,  #1e5799 50%,#fff600 50%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#fff600',GradientType=1 );
}

If that is too difficult to understand for you, use some online service like this to generate the desired gradient.

Just set the location of both colours to 50% :)

thanks, but the gradient looks a little bit "juggy". There is other simple method to do this? — user3355028, Dec 13 '14 at 12:00

Diagonal lines in CSS

1 Answers1