bootstrapにおけるアイコンスタイルcaretは様々な三角形を実現する

ウェブページの中でいつも1種の三角形のアイコンがあって、マウスはクリックして1つのドロップダウンのメニューの類を弾きます
pngアイコンの背景だと思っていたが、bootstrapでcaretというアイコンスタイルがこの効果を実現しているのを見た.CSSでもこの効果が実現するとは思いませんでした.
ソースコードを見てみると、

.caret {
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: 4px solid;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}

研究してみると、原理はこうです.
まず、要素の幅、高さを0にする必要があります.
次に、枠線スタイルを設定します.肝心なのもここです.
 
ここではまず、要素に次のスタイルがある場合の実験を行います.

{
width: 0;
height: 0;
border: 4px solid;
}

効果は何ですか?正方形です
 
要素の幅も高さも0なので、4 pxの枠線しかないので、上の効果になります.
 
また、スタイルを次のように変更します.

{
width: 0;
height: 0;
border-top: 40px solid #000;
border-right: 40px solid #ff0000;
border-left: 40px solid #ff0000;
border-bottom: 40px solid #000;
}

これはどんな効果がありますか?考えられないかもしれませんが、
これはなぜですか.例えば、赤と黒の4枚の板が要素を表す4つの枠を持っていて、彼らを2つの横に2つ重ねていると、2次元平面での投影が上の効果になります.
ここまで言うと、上の三角形のアイコンはどうやって来たのか、要素には下の枠がなく、左右の枠は透明で、上図の上の黒い三角形の部分だけに相当します.
 
したがって、逆三角形、右方向、または左方向の三角形を作るには、三角形の底に枠線を設定し、腰の枠線を透明にするだけです.
例:

{
width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid #ff0000;
border-bottom: 40px solid transparent;
}

   
 
また、スタイルをこのように変更すると、

{
width: 0;
height: 0;
border-top: 40px solid #000;
border-right: 30px solid #ff0000;
border-left: 50px solid #ff0000;
border-bottom: 25px solid #000;
}

次のような効果が得られます.
転載先:https://blog.51cto.com/shaoude/1611819