A rotated line through the whole screen

Issue

I want to have a slightly rotated line separating my site content, But when I try to rotate the <hr> line, it never ends properly, leaving ugly gaps.

How could I get lines that go through the whole screen?

.dividingline {
  transform: rotate(-5deg);
  overflow: hidden;
}

<div class="dividingline">
  <hr style="margin-top: 50px; margin-bottom: 0px; width:200%; position:relative; left:-1200px; border-width:10px; border-style: solid; border-color: #e82010; border-radius: 24px; background-color:#e82010; height:30px">
  <hr style="margin-bottom: 0px; margin-top: 0px; width:200%; position:relative; left:-1200px; border-width:10px; border-style: solid; border-color: #fe5b20; border-radius: 24px; background-color:#fe5b20; height:30px">
  <hr style="margin-bottom: 50px; margin-top: 0px; width:200%; position:relative; left:-1200px; border-width:10px; border-style: solid; border-color: #f26c8f; border-radius: 24px; background-color:#f26c8f; height:30px">
</div>

Solution

To avoid overflows the transform-origin needs to be set at the start of the line. And instead of rotating entire <div> rotate each line individually:

.dividingline {
  margin-top: calc(tan(5deg) * 100vw);
}

.dividingline>hr {
  margin: 0px;
  height: 30px;
  border-radius: 15px 15px;
  
  transform: rotate(-5deg);
  transform-origin: 0 50%;
}

.dividingline>:nth-child(1) {
  background-color: #e82010;
}

.dividingline> :nth-child(2) {
  background-color: #fe5b20;
}

.dividingline> :nth-child(3) {
  background-color: #f26c8f;
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
<div class="dividingline">
  <hr>
  <hr>
  <hr>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

In the output click on "Full page" and resize the browser window. The lines don't overflow out of screen or cover any text lines.

Answered By - the Hutt