cssで小さな三角形を実装する(原理)_html/css_WEB-ITnose

レンダリングを 図 1 に示します: (簡単なデモですが、少し見苦しいですが、気にしないでください)

PS: IE、FF、chrome、360 セキュア ブラウザと互換性があります

まずそれについて話しましょう 原則は 図 2 に示すとおりです:

この div のスタイルは次のとおりです:

div{ width: 0px; height: 0px; border-width: 20px; border-style: solid; border-color: lightgreen pink yellow lightblue;}

説明: div の幅と高さが 0 の場合、境界線の幅を に等しくします。 色を設定すると、div が 4 つの小さな三角形に分割されているように見えることがわかります。他の 3 つ (方法: これら 3 つの側面の色を透明に設定します)。

上の三角: (

図 3

)

対応する CSS コード:

#triangle{ width: 0px; height: 0px; border-width: 20px; border-style: solid; border-color: transparent transparent yellow transparent;}

さまざまなブラウザにできるだけ適応できるようにするために、さらに数行追加しましょう。コード (主に IE の互換性の問題を解決するため):

 1 #triangle{ 2  width: 0px; 3  height: 0px;<strong> 4  *width: 40px; 5  *height: 40px; 6  font-size: 0; 7  line-height: 0; 8  overflow: hidden;</strong> 9  border-width: 20px;<strong>10  border-style: dashed dashed solid dashed;11  border-color: transparent transparent yellow transparent;</strong>12 }

説明:

①border-color: 透明 透明 黄色 透明

図 2 によると、必要なものは上の三角形であるため、保持は下の境界線なので、他の 3 つの辺を透明に設定します。

②border-style: 破線 破線 実線 破線

IE6 は透明属性をサポートしていないため、スタイルを設定します。他の 3 つの辺を

破線に設定すると、境界線の幅が非常に大きい場合、破線が非表示になります。 (私のPCにはie6がないので、実践していません。すいません)

③font-size: 0; line-height: 0; overflow: hidden; この3つの文が追加されていない場合、次のような効果が発生します:

つまり、IE では、表示されるのは三角形ではなく、台形です。

④ 最後に、さらに 2 つの CSS ハックを追加しました:

*width: 40px; *height: 40px; 関連する質問が見つからなかったので、何気なく width&height スタイルに

を追加すると、小さな三角形が表示されました。

IE では、div の幅と高さには境界線も含まれる、という感じです (これはまだよくわかりません

答えてくれる専門家がいるといいのですが)。

IE でこの問題を解決するために、最終的にこれら 2 つの CSS ハックを追加しました。安全ではないと思われる場合は、「_width: 40px; _height: 40px;」を追加することもできます

追記: ① IE6 と IE7 は「*」を認識でき、IE6 は「_」を特定して検索できます。 CSSハック」。

② *幅は境界線の幅の2倍に設定する必要があります。 *高さは同じです。

下の三角形、左の三角形、右の三角形については、上の 2 つの CSS 文を変更するだけで済みます。その他の変更は次のとおりです。

下の三角:

border-style: solid dashed dashed dashed;border-color: lightgreen transparent transparent transparent;

左三角:

border-style: dashed solid dashed dashed;border-color: transparent pink transparent transparent;

直角三角形:

border-style: dashed dashed dashed solid;border-color: transparent transparent transparent lightblue;

最后，给出效果图1的代码：

 1 /* css */ 2 *{ 3  margin: 0px; 4  padding: 0px; 5  text-align: center; 6 } 7 #container{ 8  position: relative; //这句很重要，因为小三角是相对父元素#container来绝对定位的 9  width: 50px;10  height: 40px;11  border:1px solid lightblue;12  margin: 200px auto;13  padding: 20px;14  15 }16 #chat{17  width: 50px;18  height: 40px;19  background-color: lightblue;20 }21 #triangle{22  position: absolute; //设置小三角绝对定位23  width: 0px;24  height: 0px;25  *width: 14px;26  *height: 14px;27  font-size: 0;28  line-height: 0;29  overflow: hidden;30  border-width: 7px;31  border-style: dashed dashed dashed solid;32  border-color: transparent transparent transparent lightblue;33  top: 33px; //33px：父元素#container的内边距20px + #chat宽度的一半20px - 自身元素#triangle的边宽7px =33px34  left: 70px; //70px: #chat的宽度50px + 父元素#container的内边距20px =70px35 }

/* html代码 */<div id="container"> <div id="chat"></div> <div id="triangle"></div></div>

 

如有不足之处，欢迎批评建议，  O(∩_∩)O谢谢