Web デザインでは、Web ページを装飾するために矢印を装飾として使用することがよくありますが、多くの Web デザイナーは矢印の効果を実現するためにフォント アイコンを使用することを好みますが、これは Web ページの読み込みにも影響を与えます。今日は、Feiniao Muyu の編集者が、div と CSS を使用して Web デザインで矢印効果を実現する方法を説明します。
DIV+CSS で小さな実線の矢印の効果を実現Web ページ上のドロップダウン機能を備えた一部の二次ナビゲーション メニューやリストでは、DIV にコンテンツが含まれていることを示すためにいくつかの小さな矢印が実装されています。では、これらの小さな矢印のスタイルを実装するにはどうすればよいでしょうか。
まずはCSSコードを入れます
/*上矢印*/.to_top {幅: 0; 高さ: 0; border-bottom: 10px 実線 #ccc; border-left: 10px 実線透明;}/*下矢印*/ . to_bottom { 幅: 0; 高さ: 0; ボーダー上: 10 ピクセルのソリッド #ccc; ボーダーの左: 10 ピクセルの透明; 10 ピクセルの固体透明;}/*左への矢印*/.to_left {幅: 0; 高さ: 0; ボーダー-右: 10 ピクセルの固体透明;} / *右への矢印*/ .to_right { width: 0; height: 0; border-left: 10px ソリッド #cccf;透明; ボーダー下部: 10 ピクセルの透明;}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コード
.text{ 表示: インラインブロック; ボーダー右: 2 ピクセル; 幅: 100 ピクセル; 変換: 自動マージン: 50 ピクセル自動 100 ピクセル;}HTMLコード
<span class=text></span>
コードの実行結果
C 以下のコードを変更して矢印の数を変更したり、幅と高さを変更して矢印のサイズを変更したりできます。
transform: rotate(-135deg);/*调整旋转的角度*/
上記は、HTML に div+CSS を使用して単純な矢印アイコンを実装するためにエディターが紹介するコードです。ご質問があれば、メッセージを残してください。エディターが返信します。間に合うようにあなたに。また、VeVb武道サイトを応援してくださった皆様、誠にありがとうございました！
この記事が役立つと思われる場合は、転載していただいてかまいませんので、出典を明記してください。ありがとうございます。