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

Nuestro team de especialistas luego de varios días de trabajo y de recopilar de datos, hallamos la solución, nuestro deseo es que te sea de gran utilidad en tu trabajo.

Solución:

Creo que usar un degradado de fondo con una transición dura es una solución muy limpia:

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

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;

Para este tipo de cosas, podría usar pseudoselectores 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 pudiera expandirse dependiendo de dónde hiciera clic. Desafortunadamente, esto requiere un poco más de jQuery ya que la posición de su clic (en relación con el cuadro) debe calcularse.

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

JSFiddle

Recursos:

Seleccionar y manipular pseudoelementos CSS como ::before y ::after usando jQuery

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

Si tienes algún titubeo o disposición de ascender nuestro artículo te mencionamos realizar una interpretación y con deseo lo analizaremos.

---

---

Utiliza Nuestro Buscador