在斜线上对齐文本

是否有可能使文本在斜线上左对齐？它的对齐方式应该遵循倾斜的倾斜图像，并需要支持 IE9+？

我的例子code :

img {
  display: block;
  float: left;
  transform: rotate(-5deg);
  margin: 0 15px;
}

<div>
  <img src="http://placehold.it/150x250&text=img" alt="image" />
  <p>Lorem ipsum dolor sit amet. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu,luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in, paragraph.</p>
</div>

使用更少

你们让我跳出了框框思考，所以我想出了我自己的丑陋的解决方案。 我的想法是添加一堆额外的正方形元素并计算其大小:

.loop(@i) when (@i > 0){
  .loop((@i - 1));
  .space@{i}{
    width: floor(@i*@hSize/(1/tan(5deg)));
  }
}
@hSize: 15px;
.space {
  float: left;
  clear: left;
  width: @hSize;
  height: @hSize;
}

HTML:

<p>
  <span class="space space1"></span>
  <span class="space space2"></span>
  <!-- (...) -->
  <span class="space space11"></span>
  Lorem ipsum dolor sit amet. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in, paragraph.
</p>

概念证明：http://codepen.io/Tymek/pen/jEypOX?editors=110

@chipChocolate.py，对我来说，不使用 JavaScript 这只是一个原则问题。如果有人想根据我的解决方案编写 JS/jQuery 代码，不客气。稍后请在这里分享。