CSS の境界線を通して三角形と矢印を実装するサンプルコード

1. CSS ボックスモデル

ボックスには、余白、境界線、パディング、コンテンツが含まれます
境界線の接合部には滑らかな斜線が引かれています。この機能を使うと、境界線の幅や色を設定することで、小さな三角形などを描くことができます。
div 要素はブロックレベル要素であり、ブロックボックスとして表示され、特定の実装に使用できます。

<div class="triangle"></div>
<div class="arrow"></div>

**例 1、**通常、高さ、幅、境界線を設定すると、ボックスは次のように表示されます。

.三角形 {
   幅: 25px;  
   高さ: 25px;  
   オーバーフロー: 非表示;
   フォントサイズ: 0;
   行の高さ: 0;            
   境界線の幅: 50px;               
   境界線のスタイル: solid;
   境界線の色: rgb(235, 54, 241) rgb(86, 245, 139) rgb(76, 0, 255) rgb(46, 205, 245);
}

注: IE6 ではデフォルトのフォントサイズと行の高さが設定され、ボックスが引き伸ばされた長い長方形として表示されるため、overflow、font-size、line-height が設定されます。

例 2: 例 1 の幅と高さを 0 に設定すると、ボックスは次のように表示されます。

.三角形 {
  幅: 0;  
  高さ: 0;  
  オーバーフロー: 非表示;
  フォントサイズ: 0;
  行の高さ: 0;            
  境界線の幅: 50px;               
  境界線のスタイル: solid;
  境界線の色: rgb(235, 54, 241) rgb(86, 245, 139) rgb(76, 0, 255) rgb(46, 205, 245);
}

この時点で、ボックスは 4 つの三角形で構成されていることがわかります。 1 色だけを残し、他の 3 色を透明または背景と同じ色に設定すると、三角形を実現できます。異なる位置に残すことを選択したエッジに応じて、さまざまな方向の三角形を表示できます。

例3: 下端のみを残す

.三角形 {
   幅: 0;  
   高さ: 0;  
   オーバーフロー: 非表示;
   フォントサイズ: 0;
   行の高さ: 0;            
   境界線の幅: 50px;               
   境界線のスタイル: solid;
   境界線の色: 透明 透明 rgb(76, 0, 255) 透明;
}

例4: 例3の幅と高さは保持され、台形が得られる。

幅: 0;  
高さ: 0;

例5: 矢印の実装

矢印は実際には、オフセット位置に 2 つの三角形を積み重ねることによって実現されます。
青い三角形を 1 ピクセルオフセットした白い三角形で覆い、矢印を形成します。

次のスタイルは上向き矢印を実装します。

.矢印{
   位置: 絶対;
}
. 矢印:前、. 矢印:後{
   位置: 絶対;
   コンテンツ： '';
   border-top: 10px 透明な実線;
   border-left: 10px 透明な実線;
   border-right: 10px 透明な実線;
   下境界線: 10px #fff solid;
}
. 矢印:前{
   下部境界線: 10px #0099CC 実線;
}
. 矢印:後{
   top: 1px; /*上書きして1pxずらす*/
   下境界線: 10px #fff solid;
}

要約する

上記は、CSS の境界線を介して三角形と矢印を実現するために紹介したサンプルコードです。お役に立てば幸いです。ご質問がある場合は、メッセージを残してください。すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。
この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!

<<: MySQLとOracleの誤解の詳細な説明

>>: clipboard.js の使用法の概要