CSS を使用して小さな三角形を作成する際の問題 (よく書かれるテスト問題)_html/css_WEB-ITnose

筆記試験の問題では、CSS を使用して特定の Div の境界線に三角形を追加するという問題によく遭遇します。これをマスターして、Div の境界線を適切に使用します。 borderは目立たない境界線でdivの幅と高さが0の場合、境界線は小さな正方形になり、残りの3辺を透明にすると魔法の三角形になります。

次に、CSS の :before および :after 疑似要素を調べます。このような問題は、図に示すように、通常、ソリッド問題と中空問題の 2 つのタイプに分類されます。

以下の図の DOM 構造は次のとおりです:

1. 実線の三角形

この種の問題では、通常、背景色が指定されます (ほとんどの場合)。 dark) では、グラフィック全体の周囲にフレームがないため、簡単に始めることができます。アイデアは非常に単純で、div 全体の背景色、長さと幅、相対的な位置を決定し、疑似要素の後に div の後にコンテンツ (スペース) を追加し、幅を 0 に設定し、境界線の幅を決定します。絶対的な位置決めで十分です。

#demo{    width: 100px;    height: 100px;    background-color: #333;    position: relative;      }#demo:after{    border:solid transparent;    border-left-color:#333;    border-width:10px;    width:0;    content:" ";    position:absolute;    left:100%;    top:10%;  }

2. 中空三角形

中空三角形の設計思想は中実三角形と同様であり、外側の大きな三角形は全体の境界線に設定された中実三角形とみなすことができます。色、および内側の小さな三角形。三角形は白に設定された実線の三角形です。外側のレイヤーの幅は内側のレイヤーの幅よりも大きく、視覚的には中空の三角形です。重要なのは、:before 疑似要素と :after 疑似要素がそれぞれ外側の大きな三角形と内側の小さな三角形、および境界線のサイズの計算に対応していることです。視覚的には、最初に :after 擬似要素スタイルが表示され、次に :before 擬似要素スタイルが表示されることに注意してください。つまり、この 2 つが重なると、:after 擬似要素が最初に表示されます。

上の画像の中空の三角形のデザイン (border-width: 2px) のコードは次のとおりです。

りー

説明するには, CSS3 では、:before および :after 擬似要素は、IE8 との互換性を保つために、単一のコロンを記述することをお勧めします。