html - 三 Angular 漂浮物

Question

有没有办法制作一个三 Angular 形 float ，使页面看起来像下面这样:

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

理论上，里面的内容自然是可变的，所以我更愿意以“自动”的方式进行，这样当实际的文字/描述出现时，它不会影响我必须放置内容的位置。您可以自由使用任何 HTML/CSS/JS 组合，但越简单越好 =)

如果有帮助的话，最初我尝试将不同长度的 div 向左浮动并向左浮动，但很自然地当我放置文本时，它出现在所有内容之后并且向右浮动是行不通的。

Answer 1

这里有一个想法:将一些 float block 并排放置，每一行都比下一行高。这将创建一个(透明的)三 Angular 形 block 。

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 .你能用它吗？