Наклонный блок с текстом на javascript

div{ 
  width: 60%; 
  background: red; 
  transform: skew(20deg); 
  margin-left: 20%; 
  padding: 5px 10px; 
}

<div> 
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
</div>

$(function() { 
  indent($("div")[0]); 
}); 
 
function indent(div) { 
  if (document.createRange) { 
    var rng = document.createRange(); 
    rng.selectNodeContents(div); 
    var len = rng.toString().length; 
    var start = rng.toString().search(/.\s/); 
    if (start < 0) return; 
    var txt = div.childNodes[0]; 
    rng.setEnd(txt, start); 
    var startRect = rng.getBoundingClientRect(); 
    var rect; 
    for (var i = start + 1; i < len; i++) { 
      rng.setEnd(txt, i); 
      rect = rng.getBoundingClientRect(); 
      if (rect.bottom > startRect.bottom) { 
        rng.setStart(txt, i - 1); 
        rng.setEnd(txt, len); 
        div = document.createElement("div"); 
        div.className = "indent"; 
        rng.surroundContents(div); 
        indent(div); 
        break; 
      } 
    } 
  } else if (document.body.createTextRange) { 
    var rng = document.body.createTextRange(); 
    rng.moveToElementText(div); 
    var x = rng.getBoundingClientRect().right; 
    rng.collapse(); 
    var rect = rng.getBoundingClientRect(); 
    var y = rect.bottom; 
    rng.moveToPoint(x - 1, y - 1); 
    rng.moveEnd("textedit"); 
    var html = "<div class=\"indent\">" + rng.text + "</div>"; 
    rng.pasteHTML(html); 
    div = $(".indent", div)[0]; 
    rng.moveToElementText(div); 
    var pos = rng.getBoundingClientRect(); 
    if (pos.bottom > rect.bottom) { 
      indent(div); 
    } 
  } 
}

.wapper { 
  width: 400px; 
} 
 
.indent { 
  margin-left: 20px; 
  margin-right: -20px; 
  text-align: justify; 
  width: 400px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="wapper">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. 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. 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.</div>

*{ 
  marin:0; 
} 
.div{ 
  width:70%; 
  text-align:justify; 
} 
span.float{ 
  float:left; 
  clear:left; 
  height:20px; 
}

<div class="div"> 
<span class="float" style="display:inline-block; width:10px;"></span> 
<span class="float" style="display:inline-block; width:30px;"></span> 
<span  class="float" style="display:inline-block; width:50px;"></span> 
<span  class="float" style="display:inline-block; width:70px;"></span> 
<span  class="float" style="display:inline-block; width:90px;"></span>  
<span  class="float" style="display:inline-block; width:110px;"></span>  
Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt eum excepturi cum accusantium. Beatae cumque cum quasi commodi nisi sunt, voluptatibus nemo, corporis optio praesentium magnam dolorum vel consectetur provident, dolor unde molestiae repellendus eum? Quas illum reprehenderit repellat voluptatem? Est dolorem velit sapiente recusandae temporibus laborum natus ipsam tempora? 
</div>