Zwei-Ton-hintergrund, geteilt durch die Diagonale Linie mit css

Ich versuche, ein Hintergrundbild erstellen mit css, wo die eine Seite ist einfarbig und die andere ist eine textur: die beiden sind geteilt durch eine Diagonale Linie. Ich möchte diese auf 2 separate divs, da ich Plane, fügen Sie einige Bewegung mit jQuery, wo, wenn Sie klicken Sie auf der rechten Seite, das graue Dreieck wird immer kleiner, und wenn Sie auf der linken Seite das texturierte Dreieck wird kleiner (wie ein Vorhang-Effekt). Jede Beratung würde sehr geschätzt werden.

Zwei-Ton-hintergrund, geteilt durch die Diagonale Linie mit css

InformationsquelleAutor der Frage MG1 | 2013-02-06

  1. 18

    Für diese Art von Sache, die Sie verwenden könnte, die pseudo-Selektoren wie :before oder :after in Ihrem CSS zu minimieren, auf unnötige HTML-markup.

    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

    Dann versuchte ich, es so zu machen, dass jeder Abschnitt erweitern konnte, je nachdem, wo Sie geklickt haben. Leider erfordert ein wenig mehr jQuery die position von Ihr auf (bezogen auf die box) muss erarbeitet werden.

    Einer Klasse wird dann Hinzugefügt, um das Feld, die änderungen der :before pseudo-Objekt. Der Vorteil der Verwendung einer Klasse ist, dass CSS Animationen sind besser optimiert für den browser als jQuery ersetzt.

    JSFiddle

    Ressourcen:

    Die Auswahl und Manipulation von CSS-pseudo-Elemente wie ::before und ::after mit Hilfe von jQuery

    Mit jQuery, wie man auf die Koordinaten auf der target-element

    InformationsquelleAutor der Antwort Harvey

  2. 17

    Denke ich über einen hintergrund-Farbverlauf mit einem harten übergang ist eine sehr saubere Lösung:

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

    InformationsquelleAutor der Antwort Tom Brinkkemper

Schreibe einen Kommentar