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 ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!