Two-tone background split by diagonal line using css

MG1 picture MG1 · Feb 6, 2013 · Viewed 74.7k times · Source

I am trying to create a background using css where one side is a solid color and the other is a texture: the two are split by a diagonal line. I would like this to be 2 separate divs since I plan to add some motion with jQuery where if you click on the right, the grey triangle gets smaller and if you click on the left the textured triangle gets smaller (like a curtain effect). Any advice would be greatly appreciated.

Background split by diagonal line

Answer

Tom Bevelander picture Tom Bevelander · Sep 20, 2016

I think using a background gradient with a hard transition is a very clean solution:

.diagonal-split-background{
  background-color: #013A6B;
  background-image: -webkit-linear-gradient(30deg, #013A6B 50%, #004E95 50%);
}