1

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>
2

1 Answer 1

1

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% :)

2
  • thanks, but the gradient looks a little bit "juggy". There is other simple method to do this? Commented Dec 13, 2014 at 12:00
  • I linked a site, that's as simple as it gets buddy
    – trve.fahad
    Commented Dec 13, 2014 at 19:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.