Нескошенный текст, который выравнивается по краю перекошенного элемента

Я пытаюсь создать нормальный текст в искаженном div. Я хочу сохранить выравнивание по краю скошенного div следующим образом:

skewed_perspective

Этот код можно увидеть здесь: 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>

Я не был в состоянии заставить вышеупомянутое работать, поскольку это все еще выравнивает текст вдоль вертикального края. Любопытно, если кто-то еще сталкивался с этим или знает решение. Благодарю.

1 ответ

Я сам ищу хороший ответ на такой вопрос, который не является подрывом производительности, ужасно хакерским и хорошо поддерживаемым.

Самое близкое, что я мог найти, - это усилия Adobe по созданию форм CSS3.

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

Другие вопросы по тегам