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

推薦する

Vue マウスホイールスクロール切り替えルーティング効果を実装する方法

ルート ルーティング コンポーネント (アプリの下のルート ルーティング コンポーネント。子コンポー...

TypeScript での関数オーバーロード

目次1. 関数シグネチャ2. 関数のオーバーロード2.1 オーバーロードされたシグネチャは呼び出し可...

MySQL クロスデータベーストランザクション XA 操作の例

この記事では、例を使用して、MySQL のデータベース間トランザクション XA 操作について説明しま...

MySQL を解凍してインストールおよび完全に削除する方法の詳細なグラフィック説明

1. MySQLをインストールする（1）ダウンロードしたMySQLの圧縮ファイルをMySQLをインス...

nginx リバース プロキシでの proxy_pass の実装

フォーマットはシンプルです: proxy_pass URL; URL には、送信プロトコル (htt...

ネイティブJSで実装されたギャラリー機能

目次最初2番目Native Js はギャラリー機能を実装します。画像をクリックすると、対応する拡大画...

VMware 仮想化 KVM のインストールと展開のチュートリアルの概要

仮想化1. 環境セントオス7.3 selinuxとファイアウォールを無効にする2. 仮想化環境の構成...

初心者がdockerにmysqlをインストールするときに遭遇するさまざまな問題

序文最近、パソコンのシャットダウンに時間がかかることが多く、強制的にシャットダウンするには電源ボタン...

簡単な約束を段階的に実行する方法を教えます

目次ステップ1: フレームワークを構築するステップ2 構築されたPromiseフレームワークに入力す...

Element-ui NavMenuサブメニューを使用して再帰的に生成する場合のエラーの詳細な説明

ナビゲーションバーのサブメニューを再帰的に生成すると、メニューは正常に生成できるが、マウスをホバーす...

JavaScript でオブジェクトのプロパティを削除する方法

1. 削除delete は、オブジェクトのプロパティを残さずに削除する唯一の方法ですが、その「代替」...

Vue 画像切り抜きコンポーネントのサンプルコード

例：ヒント:このコンポーネントはvue-cropperの二次パッケージに基づいていますプラグインをイ...

リモートログインとポート公開を防ぐためのLinuxサーバー構成IPホワイトリスト

序文ブロガーが使用しているサーバーは Alibaba Cloud から購入したものです。実際、Ali...

Nginxはctxを使用してデータ共有とコンテキスト変更機能を実現します。

環境: init_worker_by_lua、set_by_lua、rewrite_by_lua、a...

Hタグはウェブページ制作において適切に使用すべきである

HTML タグには、ページのタイトルを処理するための特別なタグがあります。これらは h1、h2、h3...