三角形の CSS 実装と応用例_html/css_WEB-ITnose

css实现三角形，网上讲了很多，但我发现一般都是三角向上或者向下的，向左向右这两方向似乎讲得很少，本人试了一下，发现原来在IE下很难搞~~(万恶的IE)...
css实现三角形的原理是：当元素的宽高为0，边框(border)不为0时，四个角边框交界重叠处分45度角平分。讲得很别扭~~~上个图吧：
            .triangle {               
                border-color: red green blue pink;
                border-style: solid;
                border-width: 20px 20px 20px 20px;
                width: 0;
                height: 0;
            }

   

それでは、国境を離れるだけで何が見つかるでしょうか？ ? .triangle {

ボーダーカラー: 赤 透明 透明;

ボーダー幅: 20px 0px 20px;




;出てくるのと同じように、左から右に変更しました。透明 透明 透明 赤;
20px 20px;

幅: 0; ? ねえ、どんなブラウザ使ってるの？ IE6 以外のバージョンを使用している場合は、おめでとうございます。次に IE6 を使います (歯ぎしり…)、

カーン~~~~

IE6 ではデフォルトで背景が黒になることが分かりました~~

使いやすいのはIEの独自のもの、ベルのブロックを解除します まだベルを結ぶ人が必要です(~_~)

まずCSSハック、アンダースコア「_」を使用してください! Er d _Border-Top-color:white; _Border-Bottom-color:white
次に、彩度フィルターを使用します。

font-size: 0; line-height: 0; も追加します。

これにより、黒い背景が完全に削除されます:

.triangle {
border-color: 透明 透明な透明な赤;
border-style: ソリッド;
border-width: 20px 0px 20px;
フォントサイズ: 0;
行の高さ: 0;    
幅: 0;
高さ: 0;
_border-top-color: 白;
_border-bottom-color: 白;
_filter: chroma( color =white);
}

html+css:

Js代码

.tipArrow {
境界線-style: ソリッド;
/* ie6 高さの修正 */
font-size: 0 ;
line-height: 0;
透明修正 */
_border-top-color: #dddddd; _border-bottom-color: #dddddd;
_filter: chroma( color = #dddddd) }
見てください
15. ダウンロード
16. 三角形が出てきました。次に、アプリケーションの例を見てみましょう (前に書いた fadeIn と fadeOut を組み合わせたもの):
18. http://kingkit.com.cn/KUI/Tip.html
20. コンプリートパッケージ
24. Triangle3.rar