CSS3デザインリボン、帯
How To Create Depth And Nice 3D Ribbons Only Using CSS3
3Dリボン
unknown
How To Create Depth And Nice 3D Ribbons Only Using CSS3
CSS3でボックスにリボンをかける方法が掲載されています。 ボックスの角丸と影は「border-radius」+「box-shadow」プロパティ、ボックス上のメニュー部分は「transform: rotate」プロパティを使用して45度回転させています。 画像を使用しなくてもここまでできるんですね。

設置サンプルサンプルを見る
<h4>参考:<a href='http://www.pvmgarage.com/2010/01/how-to-create-depth-and-nice-3d-ribbons-only-using-css3/' target='_blank'>How To Create Depth And Nice 3D Ribbons Only Using CSS3</a></h4> <style type="text/css"> div#demo { position:relative; margin:80px auto 0px auto; padding:0; text-align:center; width:700px; } .bubble { clear:both; margin:0 auto; padding:0; text-align:left; width:650px; background:#fff; position:relative; z-index:90; /* the stack order:displayed under ribbon rectangle (100) */ -moz-border-radius:10px; -khtml-border-radius:10px; -webkit-border-radius:10px; -moz-box-shadow:0px 0px 8px rgba(0,0,0,0.3); -khtml-box-shadow:0px 0px 8px rgba(0,0,0,0.3); -webkit-box-shadow:0px 0px 8px rgba(0,0,0,0.3); } /* リボン */ .rectangle { position:relative; left:-15px; top:30px; width:680px; height:50px; margin:0; padding:0; background:#7f9db9; float:left; z-index:100; /* the stack order:foreground */ -moz-box-shadow:0px 0px 4px rgba(0,0,0,0.55); -khtml-box-shadow:0px 0px 4px rgba(0,0,0,0.55); -webkit-box-shadow:0px 0px 4px rgba(0,0,0,0.55); } .rectangle div { margin:0; padding:0; font-size:30px; color:#fff; padding-top:6px; text-shadow:1px 1px 2px rgba(0,0,0,0.2); text-align:center; } /* 左右のリボン下 */ .triangle-l { border-color:transparent #7d90a3 transparent transparent; border-style:solid; border-width:15px; width:0; height:0; position:relative; left:-30px; top:65px; z-index:-1; /* displayed under bubble */ } .triangle-r { border-color:transparent transparent transparent #7d90a3; border-style:solid; border-width:15px; width:0; height:0; position:relative; left:650px; top:35px; z-index:-1; /* displayed under bubble */ } /* ボックス内 */ .info2 { margin:25px 0 0 0; padding:10px 25px 35px 25px; } .info2 p { padding-top:10px; font-size:14px; line-height:1.5; } .info2 p a { color:#c4591e; text-decoration:none; } .info2 p a:hover { text-decoration:underline; } /* メニュー */ .menu { position:relative; top:-11px; left:80px; z-index:80; /* the stack order:displayed under bubble (90) */ } .menu ul li { -webkit-transform:rotate(-45deg); /* rotate the list item */ -moz-transform:rotate(-45deg); /* rotate the list item */ width:140px; overflow:hidden; margin:0 0 0 -85px; padding:5px 5px 5px 5px; float:left; background:#7f9db9; text-align:right; } .menu ul li a { color:#fff; text-decoration:none; display:block; } .menu ul li.l1 { background:rgba(131,178,51,0.65); } .menu ul li.l1:hover { background:rgb(131,178,51); } .menu ul li.l2 { background:rgba(196,89,30,0.65); } .menu ul li.l2:hover { background:rgb(196,89,30); } .menu ul li.l3 { background:rgba(65,117,160,0.65); } .menu ul li.l3:hover { background:rgb(65,117,160); } </style> <div id="demo"> <div class="menu"> <ul> <li class="l1"><a href="#">PHP</a></li> <li class="l2"><a href="#">JavaScript/DOM</a></li> <li class="l3"><a href="#">Ajax</a></li> <li class="l1"><a href="#">HTML5</a></li> <li class="l2"><a href="#">XHTML</a></li> <li class="l3"><a href="#">モバイル</a></li> <li class="l1"><a href="#">音声・動画配信</a></li> <li class="l2"><a href="#">MySQL</a></li> <li class="l3"><a href="#">Web関連特集</a></li> </ul> </div> <div class="bubble"> <div class="rectangle"> <div>PHP & JavaScript Room</div> </div> <div class="triangle-l"></div> <div class="triangle-r"></div> <div class="info2"> <p>PHP、JavaScript、Ajax、HTML/XHTML、CSS、Webページ埋め込みによる音声・動画のストリーム配信方法など、Webサイト制作に役立つ実用的なプログラミング・テクニックを解説しています。</p> <!-- AddThis Button BEGIN --> <div class="addthis_toolbox addthis_default_style addthis_32x32_style"> <a class="addthis_button_preferred_1"></a> <a class="addthis_button_preferred_2"></a> <a class="addthis_button_preferred_3"></a> <a class="addthis_button_preferred_4"></a> <a class="addthis_button_compact"></a> </div> <script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script> <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=cocoism3"></script> <!-- AddThis Button END --> </div> </div> </div>