CSS3が満載に使われておりますので、かなり制限がかかるかと思いますが、気にしなければ使用用途はかなりあるかなと思います。
3D Ribbons Only Using CSS3
CSS3でボックスにリボンをかける方法 でも、IEで見るとのっぺりした感じで見えてしまうので。。。 IE以外のブラウザで下のデモを見て頂きたいです。
対応ブラウザ
Google Chrome / Safari / Firefox / Opera / InternetExplorer 10 up

※ 上記サイトでデモとサンプルがダウンロードできます。
詳細は、上記サイトのほうで確認していただけるといいかと思います。 以下のコードはサンプルで作成したときのものです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<div class="demo"> <div class="menu"> <ul> <li class="l1"><a href="#">WordPress</a></li> <li class="l2"><a href="#">JavaScript</a></li> <li class="l3"><a href="#">Ajax</a></li> <li class="l1"><a href="#">HTML5</a></li> <li class="l2"><a href="#">jQuery</a></li> <li class="l3"><a href="#">CSS</a></li> <li class="l1"><a href="#">CSS3</a></li> </ul> </div> <div class="bubble"> <div class="rectangle"> <div>InfinityScope</div> </div> <div class="triangle-l"></div> <div class="triangle-r"></div> <div class="info-meta"> <p>Webサイト制作に役立つ実用的なテクニックを解説しています。</p> <p>主にCSSやjavaScriptなどの紹介が多いです。</p> </div> </div> </div> |
Pingback: CSS3で”リボン”の作り方を2つ紹介! | InfinityScope | webサイト作成に関する自分メモ()