CSS schräge Linie in der Mitte des Bildschirms

Ich versuche, eine schräge Linie in der Mitte des Bildschirms zu bekommen, und wenn Sie einen Teil schweben, sollte es wachsen (was ich wissen werde, wie ich denke).CSS schräge Linie in der Mitte des Bildschirms

Das Problem ist die schräge Linie in der Mitte des Bildschirms zu bekommen und es reaktionsfähig zu machen.

Das ist mein aktueller Code ist:

https://jsfiddle.net/kh657fL2/

HTML

<!DOCTYPE html> 
<html> 
    <head> 
     <title>HTML/CSS slicing!</title> 
     <link rel="stylesheet" type="text/css" href="style.css"> 
    </head> 

    <body> 
     <div class="block block-red"> 
      Demo 
     </div> 

     <div class="block block-green"> 
      Demo 
     </div> 

     <script src="ui.js"></script> 
    </body> 
</html>

CSS

html, body { 
    margin: 0; 
    padding: 0; 
    height:100%; 
    width:100%; 
    overflow:hidden; 
} 


.block { 
    height: 100vh; 
    width: calc(50% - 100px); 
    position: relative; 
} 

.block-red { 
    background-color:red; 
    float:left; 
} 

.block-green { 
    background-color:#00ff00; 
    float:right; 
} 

.block:after { 
    position: absolute; 
    top: 0px; 
    content:''; 
    height: 100%; 
    width: 200%; 
    background: inherit; 
} 
.block-red:after { 
    right: 0; 
    transform-origin: bottom right; 
    transform: skewX(-20deg); 
    z-index: -1; 
} 
.block-green:after { 
    left: 0; 
    transform-origin: top left; 
    transform: skewX(-20deg); 
    z-index: 2; 
}

Es sieht richtig, aber ich t reagiert nicht auf mobilen Geräten - es gibt einen weißen Zwischenraum zwischen den Farben und es ist nicht immer in der Mitte des Bildschirms. Bitte helfen Sie!

Quelle

2017-07-11 Smokegun

Es sieht so aus, als müssten Sie die Hälfte der Breite Ihres Fensters berechnen, minus 20% des größten Teils der Höhe.

CSS:

width: calc(50% - (90vh * 0.2));

Dann brauchen Sie nur die doppelte Breite für Ihr schräges Element zu berechnen:

width: calc(100vw * 2);

Bonus: Sie diese jQuery hinzufügen könnte Dinge für groß zu zentrieren, schmale Fenster:

$(window).resize(function(){ 
    var width = $(window).width(); 
    var height = $(window).height(); 
    var diff = ((width - (height * 0.37))/2); 

    if (width < (height * 0.37)) { 
    $('.block').css('left', - diff); 
    } else { 
    $('.block').css('left', '0'); 
    } 
});

Arbeitsbeispiel: JSFiddle

Update: Wenn Sie die Breite auf schweben animieren möchten, können Sie das mit einem CSS-Übergang zu tun.

transition: 1s ease-in-out;

Hover Animation Beispiel: JSFiddle

Quelle

2017-07-11 18:18:59 trevorp

Dank wirkt wie ein Zauber! – Smokegun

Kein Problem! Froh, dass es funktioniert hat. – trevorp

nur ein Problem jetzt. Wie kann ich einen Schwebeflug über den folgenden Teil erkennen? Ich muss es bei Hover wachsen lassen, aber jquery erkennt den After-Teil nicht :( – Smokegun

CSS schräge Linie in der Mitte des Bildschirms

Antwort

Verwandte Themen