三角フロート

Question

ページには、次のようなものを見えるように三角形のフロートを作るためにそこの方法です：

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

は、理論的には内部のコンテンツは、自然に、変数になるだろうので、私はそれを行うことを好むだろう実際の言葉や説明が入ってくると、どこにコンテンツを置かなければならないかというような、「自動」なやり方で。

これは、元々、さまざまな長さのdivを透明な左に置いてみましたが、私が配置したときに当然のことながら自然にそのHTML/CSS/JSコンボは使用できませんでした。テキスト、それはすべての後に来て、それを正しく浮かべて動作しませんでした。

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モジュールはブラウザに実装された後のレイアウトのこの種は、（クロームカナリアは、いくつかの初期サポート展示を構築するようになります。）はるかに簡単になります