CSS_html/css_WEB-ITnose による三角形の描画原理の分析

私たちがいつも考えている境界線は、おおよそ次のとおりです:

.border { width:50px; height:50px; border: 2px solid; border-color: #ADFF2F #BA55D3 #F4A460 #FF0000; }

その効果は次のとおりです:

しかし、border の値を増やすと、次のような効果が見られます

.border { width:50px; height:50px; border: 20px solid; border-color: #ADFF2F #BA55D3 #F4A460 #FF0000; }

見てください 効果は次のとおりです:

境界線が台形になることがわかります。

幅と高さを 0 に設定すると、制限原理により、台形は三角形になります。以下のコードを見ると、次のような効果が見られます。これで、それを描画する方法についていくつかのアイデアが得られました。三角形についてはアイデアがあります。三角形を取得するには、境界線の他の 3 辺の境界線の色の値を透明に設定します。たとえば、

.border { width:0px; height:0px; border: 20px solid; border-color: #ADFF2F #BA55D3 #F4A460 #FF0000; }  

効果は次のとおりです:

下向き三角形をデザインするとき、開発者は左上と右上の境界値のみを設定し、次に左と右の境界線の境界線の色を設定します。透明に。まずは左右の境界線の色を透明に設定して、形状がどのように見えるかを確認してみましょう。

りー

下枠を設定しないと左右の枠で下半分が切れてしまうことが分かりました。この時点で、ブートストラップの .caret コードの原理を完全に理解できるはずです。

しかし、私たちの探索はここで終わりではありませんでした。好奇心を持って、次のコードをテストしました:

.border { width:0px; height:0px; border: 20px solid; border-color: #ADFF2F transparent transparent transparent; }  

右上の境界線を設定しただけで、次の結果が得られました:

少し難しいようです。 、次のコードをテストしてみると、突然理解できるはずです。

えー

上記の例では、要素の高さと幅が両方とも 0 であるため、枠線が右上隅に縮小して正方形として表示されることがわかります。

要素の反対側に 2 つの境界線のみを設定した場合に何が起こるかを見てみましょう。

ブラウザには何も表示されません。理由を分析してください。要素の高さと幅が両方とも 0 で、2 つの反対側の境界線が交差していないため、0 に縮小する必要があります。

最後に、アプリケーションの例を見てみましょう。 :

.border{ width: 0; height:0; border-top: 40px solid #ADFF2F; border-right: 40px solid #BA55D3; border-left: 40px solid #FF0000; }

その効果は次のとおりです:

その実装原理は非常に単純で、2 つの三角形を重ね合わせるものです。