CSS の境界線を通して三角形と矢印を実装するサンプルコード

CSS の境界線を通して三角形と矢印を実装するサンプルコード

1. CSS ボックスモデル

ボックスには、余白、境界線、パディング、コンテンツが含まれます
境界線の接合部には滑らかな斜線が引かれています。この機能を使うと、境界線の幅や色を設定することで、小さな三角形などを描くことができます。
div 要素はブロックレベル要素であり、ブロック ボックスとして表示され、特定の実装に使用できます。

<div class="triangle"></div>
<div class="arrow"></div>

**例 1、**通常、高さ、幅、境界線を設定すると、ボックスは次のように表示されます。

.三角形 {
   幅: 25px;  
   高さ: 25px;  
   オーバーフロー: 非表示;
   フォントサイズ: 0;
   行の高さ: 0;            
   境界線の幅: 50px;               
   境界線のスタイル: solid;
   境界線の色: rgb(235, 54, 241) rgb(86, 245, 139) rgb(76, 0, 255) rgb(46, 205, 245);
}

注: IE6 ではデフォルトのフォント サイズと行の高さが設定され、ボックスが引き伸ばされた長い長方形として表示されるため、overflow、font-size、line-height が設定されます。

例 2: 例 1 の幅と高さを 0 に設定すると、ボックスは次のように表示されます。

.三角形 {
  幅: 0;  
  高さ: 0;  
  オーバーフロー: 非表示;
  フォントサイズ: 0;
  行の高さ: 0;            
  境界線の幅: 50px;               
  境界線のスタイル: solid;
  境界線の色: rgb(235, 54, 241) rgb(86, 245, 139) rgb(76, 0, 255) rgb(46, 205, 245);
}

この時点で、ボックスは 4 つの三角形で構成されていることがわかります。 1 色だけを残し、他の 3 色を透明または背景と同じ色に設定すると、三角形を実現できます。異なる位置に残すことを選択したエッジに応じて、さまざまな方向の三角形を表示できます。

例3: 下端のみを残す

.三角形 {
   幅: 0;  
   高さ: 0;  
   オーバーフロー: 非表示;
   フォントサイズ: 0;
   行の高さ: 0;            
   境界線の幅: 50px;               
   境界線のスタイル: solid;
   境界線の色: 透明 透明 rgb(76, 0, 255) 透明;
}

例4: 例3の幅と高さは保持され、台形が得られる。

幅: 0;  
高さ: 0;

例5: 矢印の実装

矢印は実際には、オフセット位置に 2 つの三角形を積み重ねることによって実現されます。
青い三角形を 1 ピクセルオフセットした白い三角形で覆い、矢印を形成します。

次のスタイルは上向き矢印を実装します。

.矢印{
   位置: 絶対;
}
. 矢印:前、. 矢印:後{
   位置: 絶対;
   コンテンツ: '';
   border-top: 10px 透明な実線;
   border-left: 10px 透明な実線;
   border-right: 10px 透明な実線;
   下境界線: 10px #fff solid;
}
. 矢印:前{
   下部境界線: 10px #0099CC 実線;
}
. 矢印:後{
   top: 1px; /*上書きして1pxずらす*/
   下境界線: 10px #fff solid;
}

要約する

上記は、CSS の境界線を介して三角形と矢印を実現するために紹介したサンプル コードです。お役に立てば幸いです。ご質問がある場合は、メッセージを残してください。すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。
この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!

<<:  MySQLとOracleの誤解の詳細な説明

>>:  clipboard.js の使用法の概要

推薦する

MySQL infobrightのインストール手順

目次1. 次のように、「rpm -ivh インストール パッケージ」コマンドを使用して rpm パッ...

Dockerでコンテナを作成するときにコンテナIPを指定する実装例

Docker はコンテナを作成するときに、デフォルトでブリッジ ネットワークを使用し、IP アドレス...

MySQLとOracleの違いのまとめ(機能性能の比較、選択、使用時のSQLなど)

1. 同時実行性同時実行性は OLTP データベースの最も重要な機能ですが、同時実行性にはリソース...

Portainer を使用した Docker コンテナのデプロイのプロジェクト実践

目次1. 背景2. 操作手順3. Portinerをインストールする3.1 Dockerのデプロイメ...

Dockerデーモンのセキュリティ設定項目の詳細な説明

目次1. テスト環境1.1 CentOS 7をインストールする1.2 Docker CE 19.03...

Vueはドラッグアンドドロップまたはクリックで写真をアップロードする機能を実装しています

この記事では、ドラッグアンドドロップやクリックによる画像のアップロードを実現するためのVueの具体的...

ES6 クラス継承を使用してゴージャスなボール効果を実現する方法

目次導入実装手順キャンバス環境を作成するライティングボールBallクラスを継承するMoveBallク...

シェアしたい絶妙なApple風無料アイコン素材18セット

Apple マグカップのアイコンと追加機能 HD ストレージボックス – アドオンパックセイバースノ...

HTML は、Web ページの作成者が学習して習得しなければならないものです。

HTML を学ぶメリットは何ですか? 1: ウェブサイトやブログのウェブ構造を簡単に変更できます。...

Docker Compose マルチコンテナデプロイメントの実装

目次1. WordPressの導入1. 環境を整える(II) イメージを実行するDocker の作成...

JavaScript で簡単な計算機を実装する

この記事の例では、参考までに簡単な計算機を実装するためのJavaScriptの具体的なコードを共有し...

Vue が Ref を使用してレベル間でコンポーネントを取得する手順

VueはRefを使用してレベル間でコンポーネントインスタンスを取得します例の紹介開発プロセスでは、レ...

CentOS SVN サーバーで複数のプロジェクトを管理する方法

一つの要求一般的に、企業には複数のプロジェクトがあります。SVN サーバーを設定した後は、プロジェク...

Mac インストール mysqlclient プロセス分析

仮想環境で pip 経由でインストールしてみてください: pip で mysqlclient をイン...