CSS補完トライアングル

これを実現するには、div の border 属性を設定します。

heightとwidthプロパティをそれぞれ0pxに設定し、4辺の境界値を同じ幅に設定し、境界線の色を調整して効果を確認します。

リーリー

4つの三角形で構成される正方形が得られます。以下に示すように:

次に、三角形を削除するために他の3つの辺の色を設定するだけです。このとき、

border-colorをtransparentに設定すると、三角形が得られます。

リーリー

次の写真を取得します:

また、transparentは色の値で、

rgba(0,0,0,0)に相当し、透明度は0です。ただし、 は IE6 ではサポートされておらず、デフォルトでは次のように表示されます:

==================

後日追加======================

リーリー

時々百度でこのような設定をすると 2 つの三角形が形成されることを見たことがありますが、これまで考えたこともなかったので、それを記録しました。ふふ、効果は次のとおりです。

==================その後の追加(疑似クラス)===================== =

三角形とダイアログの三角形の境界線を作成するための疑似クラス (::before と ::after)

リーリー

まず、すべての疑似クラス要素を非表示に設定します。境界線のサイズは、上下の境界線の場合は高さの半分になります。そして位置決めにより位置を制御します。効果は以下の通りです:

ここでの状況は

後と前の両方です。

リーリー

親要素の高さと幅が異なる場合は、下部分を例にして枠線のサイズを親要素の幅の半分に設定すると、三角形の上隅がちょうど中央に来るようになります。親要素の値を変更してから、top を調整し、三角形を上に移動させます。この時点では、top は負の値に設定する必要があることに注意してください。効果は以下の通りです

WeChat ダイアログ ボックスには、私たちがよく見る三角形の形もあります。私はマスターの考え方に感心し、それを実現するために 2 つの重なり合う要素を使用しています。これは、下の図に似ています。

コードは次のとおりです:

リーリー

ここでは多くのコードをマージできますが、より直感的にするために、今はこのままにしておきます。

原則: 2 つの疑似要素を設定し、それらを別々に配置することで、

互いに重なり合い

、1px の重なり合わない領域を残して効果を実現します。もちろん、上、左、右、下を調整して三角形の方向を制御することができます。