2016-11-23 48 views
0

我有div,我正在使用在HTML文件的背景中形成一条对角线。我想最终将这个文件保存为PDF。我的问题是,当角落达到页面宽度时,此对角线会导致页面调整大小。我想让它“包裹在页面的边缘”。继承人为CSS的CSS。位于HTML文件底部的div。启用div溢出页面的一面

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

回答

0

试试这个:

.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是一个盒子。当你旋转它时,宽度不知何故成为高度的一部分,当你使宽度的值更小以匹配屏幕高度时,它不会调整大小。

尝试调整宽度和高度以符合您的偏好。