Tilted block with javascript text

Via script:

$(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>

P.S. The original is here http://jsfiddle.net/gilly3/CmguZ/7/

This can be done via css polygons. Here is a handy and easy tool. Here is a handy and easy tool.

You don't need javascript to do this. You can use css transform.

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>

If on css then only so it turned out (but sorry for the question about javascript):

*{
  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>