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 回答