title: css diagonal line rotate with text
body: <p>I have a diagonal line in my website and some text in middle of it, I want to rotate the text based on how the diagonal line is. The problem is that the line is responsive and when I put a fixed rotate() function it works only for one resolution</p>
  
  <p>like this:</p>
  
  <pre><code>rotate(-11deg) on 324x564 resolution
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/4v9IQ.png" rel="nofollow noreferrer">324x564</a></p>
  
  <pre><code>rotate(-11deg) on 980x564 resolution
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/RXPNC.png" rel="nofollow noreferrer">980x564</a></p>
  
  <p>On the first image the rotate works well but on the second, no. How can I fix this ? Apart from making media queries for all different resolutions</p>
  
  <p>Divider line html code:</p>
  
  <pre><code>&lt;div class="divider1"&gt;
      &lt;h2&gt;TEST&lt;/h2&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Divider line css code:</p>
  
  <pre><code>    .divider {
      color: #fff;
      margin-top: 100px;
      padding: 0 0;
      position: relative;
      background: rgba(255, 255, 255, 0.7);
  }
  
  .divider1 {
      color: #fff;
      margin-top: 0;
      padding: 0 0;
      position: relative;
      background: rgba(255, 255, 255, 0.7);
  }
  
  .divider1 h2 {
      z-index: 0;
      text-align: center;
      color: black;
      font-size: 4rem;
      rotate(-11deg);
  }
  
  
  .divider1:before {
      position: absolute;
      -moz-transform: scaleX(-1);
      -o-transform: scaleX(-1);
      -webkit-transform: scaleX(-1);
      transform: scaleX(-1);
      filter: FlipH;
      -ms-filter: "FlipH";
      margin-top: -70px;
      content: '';
      border-style: solid;
      border-width: 0 0 7rem 100vw;
      border-color: transparent rgba(255, 255, 255, 0.7) rgba(255, 255, 255, 0.7) transparent;
  }
  
  .divider1:after {
      position: absolute;
      margin-top: 0px;
      content: '';
      border-style: solid;
      border-width: 0 0 7rem 100vw;
      border-color: transparent rgba(255, 255, 255, 0.7) rgba(255, 255, 255, 0.7) transparent;
      -moz-transform: scale(1, -1);
      -webkit-transform: scale(1, -1);
      -o-transform: scale(1, -1);
      -ms-transform: scale(1, -1);
      transform: scale(1, -1);
  }
  </code></pre>