Question

有没有办法制作三角形浮点数，以便页面看起来如下所示：

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

理论上，内部的内容自然是可变的，所以我更喜欢以“自动”方式进行，以便当实际的单词/描述进入时它不会影响我必须放置内容的位置。你有自由形式使用任何HTML / CSS / JS组合，但越简单越好=）

如果它有帮助，最初我尝试将不同长度的div向左浮动，左边有一个清晰的左边，但是当我放置文本时，它自然地出现在所有东西之后并且向右浮动它不起作用。

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 canary版本会显示一些初始支持。）

三角形浮子

2 个答案: