треугольная поплавок

Question

Есть ли способ, чтобы сделать треугольный поплавок так, что страница выглядит примерно следующим образом:

  This is a sampe 
     Page that has a 
    Triangle left float 
That looks kind of cool. 

Теоретически содержание внутри естественно будет переменными, так что я бы предпочел, чтобы это сделать в автоматическом режиме, так что, когда фактические слова/описания поступают в него, это не влияет на то, где я должен размещать контент. У вас есть свободная форма для использования любой комбо HTML/CSS/JS, но чем проще, тем лучше =)

Если это помогает, Первоначально я попытался поместить divs разной длины поплавком слева с четким левым, но, естественно, когда я разместил текст, он пришел после всего, и плавание прямо не сработало.

Answer 1

Вот идея: поместите несколько плавающих блоков рядом друг с другом, каждая на одну строку выше, чем следующая. Это создаст (прозрачный) треугольный блок.

body {line-height:1.2em} 
.blk1 {float:left; width:10px; height:6.0em} 
.blk2 {float:left; width:10px; height:4.8em} 
.blk3 {float:left; width:10px; height:3.6em} 
.blk4 {float:left; width:10px; height:2.4em} 
.blk5 {float:left; width:10px; height:1.2em} 

И HTML будет

<div class="blk1"></div> 
<div class="blk2"></div> 
<div class="blk3"></div> 
<div class="blk4"></div> 
<div class="blk5"></div> 
<div>Your text here.</div> 

Пример jsFiddle. Можете ли вы с этим работать?

Answer 2

Этот вид макета станет намного легче, как только CSS exclusions and shapes модуль был реализован в браузерах (выглядит как Chrome канарейки строит экспонатом некоторую начальную поддержку.)