1

有没有办法制作一个三角形浮动,使页面看起来像下面这样:

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

从理论上讲,里面的内容自然会是可变的,所以我更喜欢以“自动”的方式来做,这样当实际的单词/描述进入时,它不会影响我必须放置内容的位置。您可以自由使用任何 HTML/CSS/JS 组合,但越简单越好 =)

如果它有帮助,最初我尝试将不同长度的 div 向左浮动并保持清晰的左侧,但是当我放置文本时,它自然而然地出现在所有内容之后并且向右浮动不起作用。

4

2 回答 2

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。你能用它吗?

于 2012-04-08T13:23:30.443 回答
0

一旦在浏览器中实现了CSS 排除和形状模块,这种布局将变得更加容易(看起来 Chrome 金丝雀构建展示了一些初始支持。)

于 2012-04-08T13:29:21.850 回答