三角形漂浮

有沒有一種方法，使一個三角形的浮動，使得頁面看起來像下面這樣：三角形漂浮

  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

回答

相關問題