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 でルート パスワードを取得する際の問題 (テスト済み、利用可能)

推薦する

MySQL の大文字と小文字の区別に関する注意

目次MySQLの大文字と小文字の区別はパラメータによって制御されますMySQLの大文字と小文字の区別...

Nginx操作応答ヘッダー情報の実装

前提条件: ヘッダー情報操作をサポートするには、ngx_http_headers_module モジ...

Linux C バックグラウンドサービスプログラムの単一プロセス制御の実装

導入通常、バックグラウンド サーバー プログラムには 1 つのプロセスのみが必要ですが、単一のプロセ...

HTMLページがincludeを使用してphpファイルをインポートした後に余分な空白行があります

インターネットで見つけた方法は効果的ですinclude によって導入されたフッター ファイルとヘッダ...

Kubernetes (k8s) 入門

Kubernetes は面白そうだったので（ギリシャ人なら名前に問題があると思うでしょうが）、ずっと...

Linuxでユーザーが所属するグループを変更する方法

Linuxでユーザーが所属するグループを変更する1. ユーザーのグループを設定する usermod ...

IDEA で Docker プロジェクトをデプロイする手順

現在、ほとんどのプロジェクトが Docker 上にデプロイされ始めていますが、デプロイのプロセスはま...

MySQL 8.0.23 無料インストールバージョンの設定詳細チュートリアル

最初のステップは、MySQL 8.0.23の無料インストールバージョンをダウンロードすることです。 ...

よく使用される Linux コマンドの完全なリスト (推奨コレクション)

目次1. システム情報2. シャットダウン（システムのシャットダウン、再起動、ログアウト） 3. フ...

Web コンポーネントの内部イベント コールバックと問題点の分析

目次前面に書かれたWC とは何でしょうか?現在の欠陥1. コンポーネント内部イベントのコールバック2...

Vueのライフサイクルについて詳しく説明します

目次序文1. Vue2 のライフサイクルインスタンスのライフサイクルその他のライフサイクルフック2....

MySQL sql_mode の分析と設定の説明

昨夜、MySQL データベースにデータセットを挿入したときにエラーが発生しました。データベースは容赦...

CentOS で MySQL を完全にアンインストールする方法

この記事では、CentOSでのMySQLの完全アンインストールについて記録しています。具体的な内容は...

シンプルなカルーセルの最も完全なコード分析を実装するJavaScript（ES6オブジェクト指向）

この記事では、シンプルなカルーセルを実装するためのJavaScriptの具体的なコードを参考までに紹...

MySQL マスタースレーブレプリケーションと読み取り書き込み分離の詳細な説明

記事マインドマップマスター/スレーブ レプリケーションと読み取り/書き込み分離を使用する理由は何です...