2011-12-20 8 views
2

Camille-ascencio-parvy-lemoineanswer to my old question to make ribbonを与えているが、今、私はここにJSFiddleでプレイhttp://jsfiddle.net/aNmvc/8/この斜めのCSSリボンにラップアラウンドの外観を与えるには?

私は唯一のフリップ角を作るように頼まこの質問

enter image description here

次のようにリボンを反転させる必要があります。その答えにリボンの他のものは必要ありません

+0

あなたが提供したイメージ(ベベル、白い光沢、少し反転したコーナー)とまったく同じに見せたい場合は、イメージを使用する必要があります。 – ptriek

+0

@ptriek - この質問は私だけがフリップのコーナーを作るように頼んだ –

答えて

1

編集:これが行われる方法は、ポジションの周りを遊ぶのが少し難しくなります。これは私が非常にシンプルなフローティングリボンとして考えたものです:http://jsfiddle.net/aNmvc/13/、まったく完璧ではありません。三次元のリボンを作成したい場合は、折った紙を模倣するために三角形を使用する必要があります。それが役に立てば幸い! 3Dリボン上の

より:https://stackoverflow.com/questions/8456575/3d-ribbon-corners-how-to-do

+0

リボンは既に別のdivにある '

Best Ribbon around
' –

+0

リボンはあなたのフィドルリンクに表示されていません –

+0

編集!それについて申し訳ありません! – Yisela

4

チェックこのフィドル:ラッピングリボンをシミュレートするようにhttp://jsfiddle.net/zNCEr/5/

を追加しました2以上回転スパン、およびそれらを置きます!

FFでのみテストされています。

+0

すばらしい答え! – Yisela

+0

@techfoobar - 素晴らしい。それは柔軟性がありますか?私が使っているウェブサイトはレスポンシブなので、ボックスは流動的になり、テキストサイズは大きくなります。 –

+0

@Jitendra Vyas - はい、私はそう信じています。テストするには、このリンクを開くことができます:http://fiddle.jshell.net/zNCEr/5/show/ FFまたはChromeで、Ctrl + Mousewheelを使用してテキストサイズの増減をシミュレートします – techfoobar

関連する問題