防止绝对定位角度在较小的屏幕上垂直向上移动

Question

我有一个带有divs.js BG的标头div和一些绝对的局部角度，以使标头和一些文本/按钮有一个倾斜的外观。...站点效果很好，但是当垂直缩小屏幕尺寸时，角度会溢出到标题上并隐藏文本/按钮。有没有办法将它们固定在原位？？？我尝试了一些溢出选项和最小高度，但似乎对我没有任何作用。...

 HTML(also using bootstrap 4):

            <div class="container-fluid payroll-particles" id="particles-js">
              <div class="row">
                <div class="col-md-6 text-center text-md-left particle-payroll-banner">
                    <h1 class="banner-heading-payroll">Payroll</h1>
                    <h2 class="banner-lead-two">All In One Place.</h2>
                    <a class="btn btn-primary-payroll btn-lg mt-2" href="meet-us.html">Learn More</a>
              </div>
              </div>
              <div class="payroll-angle-one"></div>
              <div class="payroll-angle-two"></div>
            </div>

CSS:
.payroll-particles{
 background: #307167 !important;
 height: 80vh;
}


.particle-payroll-banner {
 position: absolute;
 top: 36%;
 right: 60%;
 -webkit-transform: translate(50%, -50%);
 transform: translate(50%, -50%);
      }

.payroll-angle-one {
  width: 100%;
  background-color: white;
  height: 300px;
  position: absolute;
  bottom: -50px;
  left: -195px;
  -moz-transform: skew(0deg, 6deg);
  -o-transform: skew(0deg, 6deg);
  -ms-transform: skew(0deg, 6deg);
  -webkit-transform: skew(0deg, 6deg);
   transform: skew(0deg, 10deg);
  }

 .payroll-angle-two {
  width: 100%;
  background-color: white;
  height: 300px;
  position: absolute;
  bottom: 10px;
  -moz-transform: skew(0deg, -6deg);
  -o-transform: skew(0deg, -6deg);
  -ms-transform: skew(0deg, -6deg);
   -webkit-transform: skew(0deg, -6deg);
   transform: skew(0deg, -6deg);
  }