CODEWITHSUNDEEP
css
user3355028
user3355028

Reputation: 177

Diagonal lines in CSS

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>

Upvotes: 1

Views: 227

Answers (1)

trve.fahad
trve.fahad

Reputation: 4486

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

Upvotes: 1

Related Questions