2011-08-14 10 views
0

どのようにCSSでこのようなレイアウトを得ることができますか?CSS divs Windowsフォルダアイコンのようなlookng

_ _ _ _ _ _ _ _ _ _ _ _ 
|      \ 
| People    \  link1   link2 
|       \ 
|_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 
|                | 
|    content          | 
|                | 
|_ _ _ __ _ __ _ _ _ _ _ _ _ __ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _| 
+0

は、あなたがこれまで何を試してみましたか? –

+0

申し訳ありません私の質問は具体的であったはずです..私はどのように見た目の斜めの種類を取得するかわからない..私はテーブルで他のすべてをやった..私は最初の取得方法を知る必要があると思いますスラントライン – RKodakandla

答えて

3

唯一の課題は「人」です。あなたは「people_slanted」などと呼ばれるクラスでこれを置くことによってそれを行うことができますそのような何か:

border-bottom: 100px solid red; 
border-left: 0 solid transparent; 
border-right: 50px solid transparent; 
height: 0; 
width: 150px; 

のI /盗んだから修正の上にこのコード:http://css-tricks.com/examples/ShapesOfCSS/ (ブラウザの互換性のために確認してください)

あなたはあなたのフォローアップのコメントにテーブルを使用していると述べた。 1つの簡単な方法は、このスラントのための基本クラスを作成し、クラスの "people_slanted"または名前を付けてdiv/spanにテーブルの左上のセル(斜めにすることになっているもの)をラップすることです。

+0

もう一つのこと...青写真CSSのようなものを見たいかもしれません。グリッドレイアウトを使って作業するのは簡単ですが、これは私にとってはグリッドのように見えるので便利です。特にサブフォルダやものがあれば便利です。 –

+0

働いてくれてありがとうSizzle ..確かにあなたのsuggesionに従います.. – RKodakandla

+0

偉大な聞く!がんばろう。 –

0

ブートストラップカード用のフォルダースタイル。

CSS

.class { 
    background-color: yellow; 
    color: #222; 
    clip-path: polygon(0 23%, 0 7%, 4% 0, 29% 0, 32% 7%, 60% 7%, 98% 7%, 100% 10%, 100% 100%, 15% 100%, 0 100%, 0% 85%); 
} 
関連する問題