HTML で div+CSS を使用してシンプルな矢印アイコンを実装するコード

HTML で div+CSS を使用してシンプルな矢印アイコンを実装するコード

ウェブデザインでは、ウェブページを美しく見せるために矢印を装飾としてよく使用します。現在、多くのウェブサイトデザイナーが矢印の効果を出すためにフォントアイコンを使用することを好んでいますが、これはウェブページの読み込みにも多少影響を及ぼします。今日は、Feiniao Muyu の編集者が、div と CSS を使用して Web デザインで矢印効果を実現する方法を説明します。

DIV+CSSで小さな実線矢印の効果を実現

Web ページ上の一部のセカンダリ ナビゲーション メニューやドロップダウン機能のあるリストには、DIV にコンテンツが含まれていることを示すために小さな矢印が実装されています。では、これらの小さな矢印のスタイルをどのように実装すればよいのでしょうか。

まず、CSSコード

/*上矢印*/
.to_top {
    幅: 0;
    高さ: 0;
    下境界線: 10px 実線 #ccc;
    border-left: 10px 透明の実線;
    border-right: 10px 透明の実線;
}
/*下矢印*/
.to_bottom {
    幅: 0;
    高さ: 0;
    上境界線: 10px 実線 #ccc;
    border-left: 10px 透明の実線;
    border-right: 10px 透明の実線;
}
/*左向きの矢印*/
.to_left {
    幅: 0;
    高さ: 0;
    右境界線: 10px 実線 #ccc;
    border-top: 10px 透明の実線;
    border-bottom: 10px 透明の実線;
}
/*右矢印*/
    .to_right {
    幅: 0;
    高さ: 0;
    左境界線: 10px 実線 #cccf;
    border-top: 10px 透明の実線;
    border-bottom: 10px 透明の実線;
}

HTMLコード

<p>上矢印</p>
<div class="to_top"></div>
<p>左矢印</p>
<div class="to_left"></div>
<p>右矢印</p>
<div class="to_right"></div>
<p>下矢印</p>
<div class="to_bottom"></div>

コード実行結果

矢印が大きすぎたり小さすぎたり、色が希望どおりでないと感じる場合は、DIV 境界線の太さと色を調整して矢印のサイズを調整できます。

大きな矢印の効果を実現するためのDIV+CSS

昨日、3 列のテーマを変更していたとき、ユーザーから、大きな左矢印と右矢印を追加すべきだというフィードバックがありました。実装は非常に簡単ですが(代わりに背景画像を使用することもできます)、色をカスタマイズできる背景機能を追加する必要があるため、矢印の色を簡単にカスタマイズできるように、DIV + CSSを使用して矢印を描画することを考えました。

CSSコード

。文章{
    表示: インラインブロック;
    上境界線: 2px 実線;
    右境界線: 2px 実線;
    幅: 100ピクセル;
    高さ: 100px;
    境界線の色: #EA6000;
    変換: 回転(-135度);
    マージン: 50px 自動 自動 100px;
}

HTMLコード

<span class="text"></span>

コード実行結果

以下の C コードを変更することで矢印の種類を変更でき、幅と高さを変更して矢印のサイズを変更することもできます。

transform: rotate(-135deg);/*回転角度を調整します*/

要約する

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

<<:  さまざまなHTTPリターンステータスコードの詳細な説明

>>:  MySQL マルチバージョン同時実行制御 MVCC の基本原理の分析

推薦する

Vue フィルター、ライフサイクル関数、vue-resource の簡単な紹介

1. フィルター例: <!DOCTYPE html> <html lang=&qu...

Dockerで最もよく使われるイメージコマンドとコンテナコマンドの詳細な説明

この記事では、Docker の使用で最もよく使用されるイメージ コマンドとコンテナ コマンドを一覧表...

Vue を使用した Amap アプリケーション開発のベスト プラクティス

目次序文非同期読み込みパッケージコンポーネントコンポーネントの使用インターフェースをカスタマイズする...

MySQL で単一のデータベースまたはテーブルを復元する方法と、起こりうる落とし穴

序文:最も一般的に使用される MySQL 論理バックアップ ツールは mysqldump です。通常...

MySQL 20 の高性能アーキテクチャ設計原則 (収集する価値あり)

オープンソース データベース アーキテクチャの設計原則01. 技術の選択最も使い慣れていて、最大限に...

優れたウェブフロントエンドデザインの指標

Web ページのアクセシビリティは、フロントエンドでのみ評価および実装できるもののようです。ユーザビ...

Nginx ロケーション設定のチュートリアル (ゼロから)

基礎位置の一致順序は、「最初に正規表現に一致し、次に共通表現に一致」です。実際のロケーションの一致順...

Linux サーバーでフォルダー、ファイル、解凍コマンドを削除する方法

1. フォルダを削除する例: rm -rf /usr/java /usr/javaディレクトリとその...

Dockerはポートマッピングを設定しますが、ソリューションにアクセスできません

#docker ps チェック、すべてのポートがマップされています コンテナID イメージ コマンド...

CSS3 box-shadow プロパティの詳細な例

CSS3 - 影の追加(ボックスシャドウの使用) CSS3 - div またはテキストに影を追加する...

MySQL 自動インクリメント ID 枯渇の例

ディスプレイ定義IDテーブルに定義された自動増分IDが上限に達した場合、次のIDを申請する際に得られ...

Ubuntu環境でPHPとNginxをコンパイルしてインストールする方法

この記事では、Ubuntu 環境で PHP と Nginx をコンパイルしてインストールする方法につ...

MySQL ストレージ エンジン MyISAM と InnoDB の違いの概要

1. MySQLのデフォルトストレージエンジンの変更MySQL 5.1 より前のバージョンでは、デフ...

JavaScriptはすべての選択と選択解除の操作を実装します

この記事では、JavaScriptで全選択と全選択解除の操作を実装するための具体的なコードを参考まで...

JavaScriptでよく使われる配列重複排除実戦ソースコード

アレイの重複排除は、通常、就職面接中に遭遇し、アレイの重複排除方法のコードを手動で記述することが求め...