title: How to make slanted border stay in correct position across different screen sizes CSS3
body: <p>I am trying to achieve the slanted left and right borders like the following design</p>
  
  
  
  <p>I have been successful in achieving something that looks like it, especially the left and right slanted borders in screen size 1360px. Unfortunately, when the screen size is increased/decreased the left and right borders really mess up the layout. Is there a better way of doing this so that it is responsive and borders stay in correct places?</p>
  
  <p>Here is how i'm coding the layout currently: <br /></p>
  
  <pre><code>.f-col1 {
      width: 15%;
      float: left;
      position: relative;
      margin-top: -30px;
  }
  .f-col1::before {
      content: " ";
      width: 104%;
      border-bottom: 1px solid #FFF;
      position: absolute;
      left: 0;
      top: 0;
      -ms-transform: rotate(22deg);
      -webkit-transform: rotate(22deg);
      transform: rotate(22deg);
      margin-top: -8px;
  }
  .f-col2 {
      width: 70%;
      float: left;
      border-top: 1px solid #FFF;
      padding-top: 12px;
  }
  .f-col3 {
      width: 15%;
      float: left;
      text-align: right;
      position: relative;
      margin-top: -50px;
  }
  .f-col3::before {
      content: " ";
      width: 104%;
      border-bottom: 1px solid #FFF;
      position: absolute;
      left: 0;
      top: 0;
      -ms-transform: rotate(-22deg);
      -webkit-transform: rotate(-22deg);
      transform: rotate(-22deg);
      margin-top: 12px;
      margin-left: -4%;
  }
  </code></pre>
  
  <p>I have made a JSFiddle for it: <br />
  <a href="https://jsfiddle.net/btmxus6t/" rel="nofollow noreferrer">https://jsfiddle.net/btmxus6t/</a></p>
  
  <p>Also, live link where you can see the layout is displaying correctly in 1360px but messes up when screen size is changed: <br />
  <a href="http://revolutionarycoder.com/footer/index.html" rel="nofollow noreferrer">http://revolutionarycoder.com/footer/index.html</a></p>