三角形漂浮

有没有一种方法，使一个三角形的浮动，使得页面看起来像下面这样：三角形漂浮

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

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

如果它有帮助，最初我尝试把不同长度的div浮动左左清晰，但自然，当我放置文字，它是在所有事情发生后才浮出水面，没有工作。

来源

2012-04-08 Aram Papazian

你希望所有的文字是在一个单一的标签？所以只是'

一些文字

'然后浮动是完全自动的？ – Matt 2012-04-08 13:17:57

这是一个想法：将一些浮动块彼此相邻，每一行高于下一行。这将创建一个（透明）三角形块。

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-08 13:23:30

我也可以使用它。谢谢。 – 2012-04-08 13:28:22

一旦CSS exclusions and shapes模块已在浏览器中实现这种布局将得到更容易（貌似版本的Chrome Canary建立展出了最初的支持。）

来源

2012-04-08 13:29:21

回答

相关问题