MG1 MG1 - 1 year ago 174
CSS Question

Two-tone background split by diagonal line using css

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 Source

You could start with something like this:

<div id="container">
    <div id="triangle-topleft"></div>


#container {
  height: 100px;
  width: 100px;
  overflow: hidden;
  background-image: url(;

#triangle-topleft { 
  width: 0; 
  height: 0; 
  border-top: 100px solid gray; 
  border-right: 100px solid transparent;

Here are the examples in action:

You can change the placement of the diagonal line with the border pixels. With this approach you would have to position content over the background setup however.