沿倾斜 div 边缘对齐的未倾斜文本答案

【问题标题】：Unskewed text that aligns along the edge of a skewed div沿倾斜 div 边缘对齐的未倾斜文本
【发布时间】：2014-05-21 19:02:38
【问题描述】：

我正在尝试在倾斜的 div 中生成普通文本。我想像这样沿着倾斜的 div 的边缘保持对齐：

该代码可以在这里看到：http://jsfiddle.net/WU8gT/8/

不漂亮；每个元素都包裹在一个浮动跨度中。

<div class="section_header twist_right">
  <span class="float twist_left">The&nbsp;</span>
  <span class="float twist_left">Quick&nbsp;</span>
  <span class="float twist_left">Brown&nbsp;</span>
  <span class="float twist_left">Fox&nbsp;</span>
  <span class="float twist_left">Jumped&nbsp;</span>
  <span class="float twist_left">Over&nbsp;</span>
  <span class="float twist_left">The&nbsp;</span>
  <span class="float twist_left">Lazy&nbsp;</span>
  <span class="float twist_left">Dog&nbsp;</span>
</div>

有没有办法在一个文本包装器中实现这个功能？如：

<div class="section_header twist_right">
  <p class="twist_left"> The quick brown fox jumped over the lazy dog</p>
</div>

我无法使上述内容正常工作，因为它仍然沿垂直边缘对齐文本。好奇是否有其他人遇到过此问题或知道解决方案。谢谢。

【问题讨论】：

标签： html css frontend skew

【解决方案1】：

我自己正在为这样的问题寻找一个很好的答案，它不是一个性能狂、骇人听闻的骇客，而且得到很好的支持。

我能找到的最接近的是 Adobe 在 CSS3 形状方面所做的努力。

http://html.adobe.com/webplatform/layout/shapes/

【讨论】：