Sfondo bicolore diviso per linea diagonale usando css

Sto cercando di creare uno sfondo usando css dove un lato è un colore solido e l’altro è una trama: i due sono divisi da una linea diagonale. Mi piacerebbe che fossero due div separate perché ho intenzione di aggiungere un po ‘di movimento con jQuery, dove se si fa clic sulla destra, il triangolo grigio diventa più piccolo e se si fa clic a sinistra il triangolo strutturato diventa più piccolo (come un effetto tenda). Qualsiasi consiglio sarebbe molto apprezzato.

Sfondo diviso da una linea diagonale

Ecco gli esempi in azione: http://jsbin.com/iqemot/1/edit

Puoi cambiare la posizione della linea diagonale con i pixel del bordo. Con questo approccio dovresti comunque posizionare il contenuto sull’impostazione di sfondo.

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

Per questo tipo di cose potresti usare pseudo selettori come :before o :after nel tuo CSS per minimizzare il markup HTML non necessario.

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

Ho quindi cercato di farlo in modo che ogni sezione potesse espandersi a seconda di dove hai cliccato. Questo purtroppo richiede un po ‘di jQuery in più poiché la posizione del tuo clic (relativa alla casella) deve essere risolta.

Una class viene quindi aggiunta alla casella che cambia il :before pseudo object. Il vantaggio di usare una class è che le animazioni CSS sono ottimizzate per il browser meglio di quelle jQuery.

JSFiddle

risorse:

Selezione e manipolazione di pseudo-elementi CSS come :: before e :: after using jQuery

Usando jQuery come ottenere le coordinate di clic sull’elemento di destinazione

Penso che usare un gradiente di sfondo con una transizione difficile sia una soluzione molto pulita:

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