ウェブデザインでは、ウェブページを美しく見せるために矢印を装飾としてよく使用します。現在、多くのウェブサイトデザイナーが矢印の効果を出すためにフォントアイコンを使用することを好んでいますが、これはウェブページの読み込みにも多少影響を及ぼします。今日は、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コード
コード実行結果 以下の C コードを変更することで矢印の種類を変更でき、幅と高さを変更して矢印のサイズを変更することもできます。
要約する 上記は、div+CSS を使用して HTML でシンプルな矢印アイコンを実装したコードです。お役に立てれば幸いです。ご質問がある場合は、メッセージを残していただければ、すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます! |
<<: さまざまなHTTPリターンステータスコードの詳細な説明
>>: MySQL マルチバージョン同時実行制御 MVCC の基本原理の分析
1. フィルター例: <!DOCTYPE html> <html lang=&qu...
この記事では、Docker の使用で最もよく使用されるイメージ コマンドとコンテナ コマンドを一覧表...
目次序文非同期読み込みパッケージコンポーネントコンポーネントの使用インターフェースをカスタマイズする...
序文:最も一般的に使用される MySQL 論理バックアップ ツールは mysqldump です。通常...
オープンソース データベース アーキテクチャの設計原則01. 技術の選択最も使い慣れていて、最大限に...
Web ページのアクセシビリティは、フロントエンドでのみ評価および実装できるもののようです。ユーザビ...
基礎位置の一致順序は、「最初に正規表現に一致し、次に共通表現に一致」です。実際のロケーションの一致順...
1. フォルダを削除する例: rm -rf /usr/java /usr/javaディレクトリとその...
#docker ps チェック、すべてのポートがマップされています コンテナID イメージ コマンド...
CSS3 - 影の追加(ボックスシャドウの使用) CSS3 - div またはテキストに影を追加する...
ディスプレイ定義IDテーブルに定義された自動増分IDが上限に達した場合、次のIDを申請する際に得られ...
この記事では、Ubuntu 環境で PHP と Nginx をコンパイルしてインストールする方法につ...
1. MySQLのデフォルトストレージエンジンの変更MySQL 5.1 より前のバージョンでは、デフ...
この記事では、JavaScriptで全選択と全選択解除の操作を実装するための具体的なコードを参考まで...
アレイの重複排除は、通常、就職面接中に遭遇し、アレイの重複排除方法のコードを手動で記述することが求め...