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 クロスフェード() を使用して半透明の背景画像効果を実現するサンプルコード

1. 要件の説明特定の要素については、背景background-imageを半透明にしたいが、テキス...

CentOS システムでの JDK のインストールと設定の概要

目次序文OpenJDKの確認とアンインストールダウンロードした圧縮パッケージを使用してJDKをインス...

CSS3はマスク連打機能を実現する

最近Bステーションでスマートアンチブロッキング弾幕と呼ばれる弾幕エフェクトを見ました。これは伝説のマ...

CSS3 でテキスト ストロークを実装する 2 つの方法 (要約)

質問最近、以下に示すように、テキストストローク効果を実現するという要件に遭遇しました。 解決策1まず...

Tomcat マルチインスタンスの展開と構成の原則

1. ファイアウォールをオフにし、Tomcatのインストールに必要なソフトウェアパッケージを/opt...

Vue3 を使用して虫眼鏡効果を実現する方法の例

目次序文1. カプセル化の重要性2. どのようにカプセル化しますか? 1. 準備2. 梱包を開始する...

js で虫眼鏡効果を実現するためのアイデアとコード

この記事の例では、虫眼鏡効果を実現するためのjsの具体的なコードを参考までに共有しています。具体的な...

MySQL 8.0.17 winx64 (Navicat 付き) 手動構成バージョンのインストール チュートリアル図

1. ダウンロードアドレス: mysql-8.0.17-winx64ダウンロードして解凍する2. フ...

Podmanはコンテナを自動的に起動し、Dockerと比較します

目次1. podmanの紹介2. Dockerと比較した利点3. 互換性4. バックグラウンド サー...

MySQLデータベースでゼロ値を含む日付の問題について簡単に説明します

デフォルトでは、MySQL は日付に 0 値を挿入することを受け入れますが、実際には日付の 0 値に...

Docker Swarm を使用して分散クローラー クラスターを構築する例

クローラーの開発プロセス中に、クローラーを複数のサーバーに展開する必要がある状況に遭遇したことがある...

Vueコンポーネント間の通信の非常に詳細な要約

目次序文1. Props、$emit一方向データフロー2. $親、$子3. $attrs、$list...

CSS 3.0とビデオを組み合わせることでクリエイティブなオープニング効果を実現

CSS 3.0 とビデオを組み合わせて実現したクリエイティブなオープニングをご紹介します。効果は次の...

CSS を使用して 3 列レイアウトを実装するサンプル コード。中央の列は適応型で、テキスト サイズに応じて幅が変わります。

Baiduのインタビューで遭遇する質問は、次のレイアウト効果を達成する必要がある。 中央の紫色の列...

純粋なCSSを使用してスクロールシャドウ効果を実現します

端的に言うと、スクロール可能な要素には非常によくある状況があります。通常、スクロールすると、要素が現...