Fondo de dos tonos dividido por línea diagonal usando css

Intento crear un fondo usando css, donde un lado es un color sólido y el otro es una textura: los dos están divididos por una línea diagonal. Me gustaría que fuera 2 divisiones separadas, ya que planeo agregar algo de movimiento con jQuery, donde si haces clic a la derecha, el triángulo gris se hace más pequeño y si haces clic sobre la izquierda, el triángulo texturizado se hace más pequeño (como un efecto de cortina). Cualquier consejo sería muy apreciado.

Fondo dividido por línea diagonal

Aquí están los ejemplos en acción: http://jsbin.com/iqemot/1/edit

Puede cambiar la ubicación de la línea diagonal con los píxeles del borde. Sin embargo, con este enfoque, debería colocar el contenido sobre la configuración en segundo plano.

#container { height: 100px; width: 100px; overflow: hidden; background-image: url(http://sofes.miximages.com/css/site-background-pattern-07.jpg); } #triangle-topleft { width: 0; height: 0; border-top: 100px solid gray; border-right: 100px solid transparent; } 
 

Para este tipo de cosas, podría usar pseudo selectores como :before o :after en su CSS para minimizar el marcado HTML innecesario.

HTML:

 

CSS:

 #container { position: relative; height: 200px; width: 200px; overflow: hidden; background-color: grey; } #container:before { content: ''; position: absolute; left: 20%; width: 100%; height: 200%; background-color: rgb(255, 255, 255); /* fallback */ background-color: rgba(255, 255, 255, 0.5); top: 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg); } 

JSFiddle

Luego intenté hacerlo para que cada sección se expandiera dependiendo de dónde hizo clic. Desafortunadamente, esto requiere un poco de jQuery adicional ya que la posición de su clic (relativa a la casilla) debe resolverse.

A continuación, se agrega una clase al cuadro que cambia el :before pseudo objeto. La ventaja de usar una clase es que las animaciones CSS se optimizan mejor para el navegador que las de jQuery.

JSFiddle

Recursos:

Seleccionar y manipular pseudo-elementos CSS como :: before y :: after usando jQuery

Usando jQuery cómo obtener coordenadas de clic en el elemento de destino

Creo que usar un gradiente de fondo con una transición difícil es una solución muy limpia:

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