html - 使 div 溢出页面的一侧

Question

我有一个 div，我用它在 HTML 文件的背景中形成一条对 Angular 线。我想最终将此文件另存为 PDF。我的问题是当一个 Angular 达到页面宽度时，这条对 Angular 线会导致页面调整大小。我想让它“包裹在页面的边缘”。这是 div 的 css。位于 HTML 文件底部的 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;
}

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 是一个盒子。当您旋转它时，宽度会以某种方式成为高度的一部分，而当您将宽度值变小以匹配屏幕高度时，它不会调整大小。

Try adjusting the width and height to match your preference.