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

推薦する

7つのMySQL JOINタイプのまとめ

始める前に、これから紹介する JOIN タイプを示すために 2 つのテーブルを作成します。テーブルを...

MySQLトリガーの詳細な説明と簡単な例

MySQLトリガーの簡単な例文法CREATE TRIGGER <トリガー名> -- トリ...

CSSスタイルシートを効率的に使用するためのヒント: スタイルシートの力を最大限に活用する

インターネット経済の継続的な発展に伴い、インターネット上の専門ウェブサイト、公共サービスウェブサイト...

ReactのPropsの簡単な比較

目次クラスコンポーネントのプロパティ比較浅い同等の浅い比較機能コンポーネントの簡単な比較先週面接に行...

Zabbixを使用してMySQLを監視する方法

Zabbix 導入ドキュメントzabbix導入後zabbixエージェントの操作1. MySQLを監視...

a タグにはテキストと画像があります。テキストを非表示にして画像のみを表示するにはどうすればよいでしょうか?

多くの場合、画像を表示する<a>タグのスタイルに遭遇しますが、タグ内にテキストがあり、そ...

Ubuntu 18.04 サーバーのパスワードを忘れたり改ざんされた場合にパスワードをリセットする方法

最近、サーバー上のアカウントが2つハッキングされ、パスワードが改ざんされました。幸い、まだ使えるアカ...

Node.js における npx コマンドの使用法とシナリオ分析

npx 使用チュートリアル今晩、 Vue-Cli勉強していたところ、ふと最新の@4.xxバージョンを...

ウェブデザイナーのための超便利なツール 50 選

ウェブデザイナーになるのは簡単ではありません。デザインやアーキテクチャを考慮するだけでなく、さまざま...

Pagoda Panel のインストール時にサーバーがデータベースにリモート接続できない問題の解決策

自分のウェブサイトを構築する予定なので、618 プロモーションを利用して Tencent Cloud...

HTML6 は折りたたみメニューとアコーディオンメニューのサンプルコードを実装します

ページの主要部分: <body> <ul id="メニュー"&...

フォームにファイルをアップロードした後にアクションを保存するよう促す理由と解決策

jsonデータはhtml形式で返される必要がありますつまり、 response.setContent...

PSを使用して2分でxhtml+cssウェブサイトのホームページを作成します

xhtml+css のウェブサイト再構築、ウェブ標準などについては、記事が多すぎるので繰り返しません...

この記事では、VUE の複数の DIV とボタン バインディングの Enter イベントを実装する方法を説明します。

現在、OK ボタンをクリックしたときやキーボードの Enter キーを押したときに操作を実行するとい...

Vue 折りたたみ表示の複数行テキスト コンポーネントの実装コード

折りたたみ表示の複数行テキストコンポーネント複数行のテキスト コンポーネントを折りたたんで表示し、展...