CSSの斜線が画面の中央に表示されます

画面の中央に斜線をつけようとしていますが、その部分をマウスで動かすと成長するはずです（これはどのように作成するかわかります）。CSSの斜線が画面の中央に表示されます

この問題は、画面の中央に斜めの線が表示され、反応しやすくなっています。

これは私の現在のコードです：

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

それが右に見えますが、私モバイルデバイスでは反応しません。色の間に空白があり、常に画面中央に表示されるわけではありません。助けてください！

出典

2017-07-11 Smokegun

ウィンドウの幅の半分、つまり高さのほとんどの20％を計算する必要があるようです。

CSS：

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

その後、あなたは自分の歪んだ要素のための二重の幅を計算する必要があります。

width: calc(100vw * 2);

はボーナス： あなたは背の高いのために物事を中心に、このjQueryのを追加することができ、狭い窓：

$(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'); 
    } 
});

の作業例： JSFiddle

を更新： あなたがホバーに幅をアニメーション化したい場合は、CSSトランジションでそれを行うことができます。

transition: 1s ease-in-out;

ホバーアニメーションの例：JSFiddle

出典

2017-07-11 18:18:59 trevorp

おかげで魔法のように動作します！ – Smokegun

問題ありません！それがうれしかった。 – trevorp

ただ1つの問題が発生しました。後ろの部分にカーソルを合わせるにはどうしたらいいですか？私はそれをホバー上で成長させる必要があるが、jqueryはアフターパーツを検出しない:( – Smokegun

CSSの斜線が画面の中央に表示されます

答えて

関連する問題