linea - esquinas diagonales css

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

Question

Estoy tratando de 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 fueran 2 divs separados ya que planeo agregar algo de movimiento con jQuery, donde si hace clic a la derecha, el triángulo gris se vuelve más pequeño y si hace clic a la izquierda, el triángulo texturizado se hace más pequeño (como un efecto de cortina). Cualquier consejo sería muy apreciado.

Answer 1

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, tendría que colocar el contenido sobre la configuración de fondo.

#container {
  height: 100px;
  width: 100px;
  overflow: hidden;
  background-image: url(http://www.webdesign.org/img_articles/14881/site-background-pattern-07.jpg);
}

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

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

Answer 2

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%);
}

Answer 3

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

HTML:

<div id="container"></div>

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 pudiera expandirse dependiendo de donde hiciste clic. Desafortunadamente, esto requiere un poco de jQuery adicional, ya que la posición de su clic (en relación con el cuadro) debe resolverse.

Luego se agrega una clase al cuadro que cambia el :before pseudo objeto. La ventaja de usar una clase es que las animaciones de CSS están mejor optimizadas para el navegador que las de jQuery.

JSFiddle

Recursos:

Selección y manipulación de pseudo-elementos CSS, tales como: antes y :: después de usar jQuery

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