Html+CSS 描画三角形アイコン

Html+CSS 描画三角形アイコン

まずはレンダリングを見てみましょう:

XML/HTML コードコンテンツをクリップボードにコピー
  1. <!doctype html >   
  2. < html   lang = "ja" >   
  3. <ヘッド>   
  4.      <メタ 文字セット= "UTF-8" >   
  5.      <タイトル>ドキュメント</タイトル>   
  6.      <スタイル タイプ= "text/css" >   
  7. #テスト1 {
  8. 高さ:20px;
  9. 幅:20px;
  10. 境界線の色:#FF9600 #3366ff #12ad2a #f0eb7a;
  11. 境界線スタイル:solid;
  12. 境界線の幅:20px;
  13. }
  14. #テスト2 {
  15. 高さ:0;
  16. 幅:0;
  17. overflow: hidden; /* ここでオーバーフロー、フォントサイズ、行の高さを設定します */
  18. font-size: 0; /*幅と高さは0ですが、IE6ではデフォルトのサイズになります */
  19. line-height: 0; /* フォントサイズと行の高さ。ボックスは引き伸ばされた長い長方形として表示されます */
  20. 境界線の色:#FF9600 #3366ff #12ad2a #f0eb7a;
  21. 境界線スタイル:solid;
  22. 境界線の幅:20px;
  23. }
  24. #テスト3 {
  25. 高さ:0;
  26. 幅:0;
  27. オーバーフロー: 非表示;
  28. フォントサイズ: 0;
  29. 行の高さ: 0;
  30. border-color:#FF9600 透明 透明 透明;
  31. 境界線スタイル:solid;
  32. 境界線の幅:20px;
  33. }
  34. #テスト4 {
  35. 高さ:0;
  36. 幅:0;
  37. オーバーフロー: 非表示;
  38. フォントサイズ: 0;
  39. 行の高さ: 0;
  40. border-color:#FF9600 透明 透明 透明;
  41. border-style:実線 破線 破線;
  42. 境界線の幅:20px;
  43. }/*IE6と互換性あり*/
  44. #テスト5 {
  45. 高さ:0;
  46. 幅:0;
  47. オーバーフロー: 非表示;
  48. フォントサイズ: 0;
  49. 行の高さ: 0;
  50. border-color:#FF9600 #3366ff 透明 透明;
  51. border-style:solid 実線 破線 破線;
  52. 境界線の幅:40px 40px 0 0 ;
  53. }
  54.      </スタイル>   
  55. </ヘッド>   
  56. <本文>   
  57.      < div   id = "test1" > </ div > < br >   
  58.      < div   id = "test2" > </ div > < br >   
  59.      < div   id = "test3" > </ div > < br >   
  60.      < div   id = "test4" > </ div > < br >   
  61.      < div   id = "test5" > </ div > < br >   
  62. </本文>   
  63. </html>​​   
  64.   

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<:  マージンの重複問題を解決する方法

>>:  Linux 上の MYSQL 5.7 でルート パスワードを取得する際の問題 (テスト済み、利用可能)

推薦する

CSS のマージンの崩壊問題を解決する方法

まず、マージン崩壊が発生する 3 つの状況を見てみましょう。 1. 隣接する 2 つのブロックレベル...

親要素を基準にCSSの位置を絶対的に設定する方法についての簡単な説明

ご存知のとおり、CSS の絶対位置はデフォルトでドキュメントに応じて設定されます。たとえば、posi...

IIS を使用して X-Forwarded-For ヘッダー (XFF) を呼び出して訪問者の実際の IP を記録する 2 つの方法

問題: IIS を通じて公開された Web サイトは F5 デバイスの背後に配置されています。透過的...

ウィンドウ環境設定Mysql 5.7.21 windowx64.zip無料インストール版チュートリアル詳細説明

1. 公式サイトのmysqlダウンロードページからmysql-5.7.21-windowx64.zi...

CSS で 2 つの固定列と 1 つの適応列を実装するいくつかの方法

この記事では、CSS で 2 つの固定列と 1 つのアダプティブ列を実装するいくつかの方法を紹介し、...

ネイティブ js カプセル化シームレスカルーセル機能

ネイティブjsカプセル化シームレスカルーセルプラグイン、参考までに、具体的な内容は次のとおりです。例...

MySQL 日付処理関数の例の分析

この記事は主にMySQLの日付処理関数のサンプル分析を紹介します。この記事ではサンプルコードを詳細に...

Linux mysql-5.6 でルート パスワードをリセットする方法

1. MySQL サービスが起動しているかどうかを確認します。起動している場合は、MySQL サービ...

Vue ページ内の公開マルチタイプ添付画像アップロード領域と適用可能な折りたたみパネル (サンプルコード)

フロントエンド プロジェクトでは、添付ファイルのアップロードは非常に一般的な機能であり、ほぼすべての...

Vueはクリックを実装し、イベントオブジェクトとカスタムパラメータを同時に渡します。

カスタムパラメータを渡すだけhtml <div id="アプリ"> ...

MySQL の完全なデータベース バックアップからデータベースとテーブルを復元する方法

公式の MySQL ダンプ ツールで、特定のデータベースのみを復元するにはどうすればよいですか?完全...

Linux環境でOpenSSL証明書を生成する

1. 環境: CentOS7、OpenSSL1.1.1k。 2. コンセプト:ルート証明書: サーバ...

Nodejs は readline を使用してコンテンツ入力を促すサンプルコード

目次序文1. batがjsを実行する2. ターミナルにバージョン番号を入力してパッケージ化コマンドを...

MySQLのページング制限のパフォーマンス問題についての簡単な説明

MySQL ページング クエリは通常、制限を通じて実装されます。 limit は 1 つまたは 2 ...

Linux システムに 3 つ以上の Tomcat をインストールする (詳細な手順)

複数のTomcatをインストールする場合は、システムにJDKがインストールされている必要があり、 T...