css - CSS トライアングル (ボーダー付き) をブラウザー間で互換性を持たせる方法

Question

ここに示すように、きちんとした先のとがったフローチャートを作成することができました: http://jsfiddle.net/R8Gx3/3/

ただし、レンダリングは主要なブラウザー (Chrome、Firefox、IE) 間で一貫していません。

これと同じ効果をより信頼性の高い方法で達成する方法について何か考えはありますか?

もちろん、画像を使用することもできますが、(新しい画像を作成するよりも) CSS で色を編集する方が簡単であるため、可能な限り CSS を好みます。

要素の背後にテクスチャ背景があるため、三角形の文字だけを使用することはできません。そのため、透明度が必要です。

score 2 · Accepted Answer

ボーダーハックに依存するよりも、UTF-8の三角形を一方の端に2つ、もう一方の端に1つ配置する方が幸運だと思います。

score 0 · Accepted Answer

最新のブラウザーでは、CSS 変換を使用できます ( IE の場合は 9以降) 。

そのため、上/右の境界線を持つボックスを作成し、45 度回転させます。

このようにして、html を単純化し、とで矢印を適用するだけです:after(:beforeそれぞれがヒントの 1 つです) 。

2 に答える 2