divのページオーバーフローを有効にする

Question

私はHTMLファイルのバックグラウンドで対角線を形成するために使用しているdivを持っています。私は最終的にこのファイルをPDFとして保存したいと思います。私の問題は、角がページ幅に達すると、この対角線がページのサイズを変更するということです。私はそれを "ページの端を覆う"ようにしたいと思う。 divのCSSをheresします。 divはHTMLファイルの一番下にあります。

.green_line { 
    position: absolute; 
    width: 900px; 
    height: 0px; 
    border-top: solid; 
    border-width: 24px; 
    border-color: #7cb7b6; 
    transform: rotate(-45deg) translateY(-50px) translateX(50px); 
    z-index: -2; 
} 

Answer 1

これを試してみてください：

.green_line { 
    position: absolute; 
    width: 70vh; /*70vh is the 70% of your current screen try 70% if didn't work*/ 
    height: 0px; 
    border-top: solid; 
    border-width: 24px; 
    border-color: #7cb7b6; 
    transform: rotate(-45deg) translateY(-50px) translateX(50px); 
    z-index: -2; 
} 

をdivボックスがあるので。あなたがそれを回転させると、幅は何とか高さの一部になり、画面の高さに合わせて幅の値を小さくすると、サイズが変更されません。

あなたの好みに合わせて幅と高さを調整してみてください。