私たちがいつも考えている境界線は、おおよそ次のとおりです:
.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; }
効果は次のとおりです:
下向き三角形をデザインするとき、開発者は左上と右上の境界値のみを設定し、次に左と右の境界線の境界線の色を設定します。透明に。まずは左右の境界線の色を透明に設定して、形状がどのように見えるかを確認してみましょう。
りーしかし、私たちの探索はここで終わりではありませんでした。好奇心を持って、次のコードをテストしました:
.border { width:0px; height:0px; border: 20px solid; border-color: #ADFF2F transparent transparent transparent; }
右上の境界線を設定しただけで、次の結果が得られました:
少し難しいようです。 、次のコードをテストしてみると、突然理解できるはずです。
えー
要素の反対側に 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 つの三角形を重ね合わせるものです。