CSS 三角形が原因で考えられること drawing_html/css_WEB-ITnose

??今日 Zhihu を閲覧しているときに質問を見つけました。CSS で三角形を描画する方法を詳しく説明してもらえますか?いくら考えても分かりませんよね？ - ほぼ知っています。偶然にも、私もつい最近、初めてフロントエンドピットに入ったときにこの問題に遭遇しました。Zhihu に関するいくつかの回答が私の思考をさらに深くするきっかけになったので、今日はこの問題についてもう一度話したいと思います。
??私が初めてこの問題に遭遇したのは、Bootstrap のデモでした。??Bootstrap のブログ テンプレートでは、CSS を使用してナビゲーション バーに三角形を描画していました:

CSS コードの重要な部分を見てみましょう:
。 blog-nav .active:after {
位置:絶対;
下:0;
左:50%;
幅:0;
高さ:0;
マージン左:-5px;
垂直整列:中央;
content: " ";
border-right: 5pxソリッド透過;
border-bottom: 5pxソリッド;
border-left: 5pxソリッド透過;
}
??これはCSSなどを使って簡単に描いただけです。直角三角形の場合、SF の記事「CSS を使用して三角形を実装する図 - SegmentFault」で答えを見つけました。この記事を通じて、境界線が台形であること、およびその上底と下底がどのような場合であるかを理解しました。台形は 0 (限界) この場合、台形は三角形になり、正方形を描きます。正方形の div が 0 の場合、3 つの境界線が非表示になり、残りの表示されている境界線が必要な三角形になります。したがって、ブートストラップのデモの問題は簡単に解決されます。
?? しかし、ブートストラップ デモの正三角形は非常に典型的な状況なので、三角形を描くときはどうすればよいでしょうか? Zhihu ユーザー @Vkki は次のような結論を出しました:

(上の幅は三角形の頂点と div の端の間の距離 (10 ピクセル) を制御します)
下の幅は三角形の高さ (150 ピクセル) を制御します
幅左側と右側は別々に制御されます 三角形の底辺の長さを表す 2 つの部分 (合計 200px)

?? 結論を覚えておくことは重要ですが、それは私の好奇心を呼び起こしました。上下左右の辺の幅が等しくなく、それぞれの境界線はどうなるのでしょうか？
??それで私は div を描画しました。CSS コードは次のとおりです:
div{
width:0;
height:0;
border-top:100px Solid;
border-bottom:125px Solid;
border-left: 150px ソリッド ;
border-right:175px ソリッド;
border-color:red green blue yellow;
}
??ブラウザでのレンダリング:

??結果は予想とは少し異なりますが、上記を組み合わせたものです。結論、それは非常に理解しやすいです:)
?? 実際、@王晓の答えは、CSS3のtransform属性のshewX()メソッドとrotate()メソッドを使用したことを私に思い出させました。 skewX() このメソッドは、他の回答とは異なるアイデアで、CSS3 の新機能を使用して、これまでに実現できなかった多くの効果を実現できます。以前はjsで実現できててすごいですね！もちろん、支払われる代償は互換性です。