ヤフーユーザーインターフェイスブログ（YUIBlog）

折りたたまれたボックスで、CSSのボーダーのトリック

これらのトリックは、画像、CSS3グラデーションや余分なマークアップの使用に頼らずに設計を達成するの​​に役立ちます。 ゼロでボックスを崩壊によってline-heightとheight値は、我々は国境を越えて、 コンテンツボックスの外のコンテンツを表示することができます。

双方向の色の背景

この例では、IE 6/7の回避策を（このソースコードチェックが含まれていないデモページ IE修正用）。

 .parent { display:inline-block; text-align: center; border: 1px solid #cecece; } .child { display:inline-block; line-height: 0; height: 0; border-top: 1em solid #ffc; border-bottom: 1em solid #fdcf46; padding:0 .6em; vertical-align:bottom; } <ul id="menuBar-A"> <li><a href="#">About Us</a></li> <li class="selected"><a href="#">Contact Us</a></li> <li><a href="#">Services</a></li> <li><a href="#">Products</a></li> </ul> 

リスト項目の間にドットとパイプ

この例では、いくつかの単純なIEの修正後、ブラウザ上で正し​​く表示されます。

 ul.one, ul.two { margin-left:0; display:inline-block; *display:inline; zoom:1; height:12px; line-height:12px; padding:0; } li { float:left; display:inline; height:2px; line-height:2px; position:relative; top:.3em; } ul.two {border-left:1px solid #333;} ul.one li {border-left:2px solid #333;} ul.two li {border-right:2px solid #333;} ul.one li.first-child, ul.two li.last-child { border:0; } a { color:#000; padding:.4em .9em; *position:relative; } <div id="menuBar-B"> <ul class="us"> <li><a href="#">About Us</a></li> <li class="selected"><a href="#">Contact Us</a></li> </ul> <ul class="ourOffer"> <li class="services"><a href="#">Services</a></li> <li><a href="#">Products</a></li> </ul> </div> 

左と右向きの三角形

この例では、IE 6/7の回避策を（このソースコードチェックが含まれていないデモページ IE修正用）。

 #box { line-height: 0; height: 0; border: .4em solid transparent; border-left-color: #333; border-right-color: #333; padding: 0 .3em; display: inline-block; } <ul id="menuBar-C"> <li><a href="#">About Us</a></li> <li class="selected"><a href="#">Contact Us</a></li> <li><a href="#">Services</a></li> <li><a href="#">Products</a></li> </ul> 

IE 6と境界線の透明性

IE 6は、キーワード"をサポートしていませんtransparent境界線の色のための"。 この値を使用すると、IE 6は黒の境界線を描画します。

このための修正は、使用することであるクロマ·フィルタ 、透明などのオブジェクトの内容の特定の色が表示されます 。 たとえば、右向き矢印を作成することは、このルールを使用することができます。

 #Box { height: 0; width: 0; border: 10px solid transparent; font-size: 0; _border-color: pink; _filter: chroma(color="pink"); border-left-color: #333; } 

フォントサイズの宣言は、IE 6のための別の回避策です。 これはブラウザがボックスの高さを増加させないことを確認することです。

プレスを停止私はちょうど新しいトリックを（Chungho牙ありがとう）を学びました！：

[IEの国境の透明性を作成する]のマジックに "のborder-style 'を設定することで破線または点線

それはそれだ！ これは単なるイメージレス設計を実現するために境界線を使用するもう一つの方法です。

参考文献

• 正多角形の研究
• slantastic
• 斜面

会話を検索： Bloglinesの | テクノラティ

共有および拡張： del.icio.usでブックマーク | Diggそれ！ | reddit！