Код для реализации простого значка стрелки с использованием div+CSS в HTML

В веб-дизайне мы часто используем стрелки в качестве украшения для украшения наших веб-страниц. Хотя многие дизайнеры веб-сайтов сейчас любят использовать значки шрифтов для достижения эффекта стрелок, это также оказывает некоторое влияние на загрузку веб-страниц. Сегодня редактор Feiniao Muyu расскажет вам, как использовать div и CSS для достижения эффектов стрелок в веб-дизайне.

В некоторых вторичных навигационных меню или списках с раскрывающимися функциями на веб-страницах будут реализованы небольшие стрелки, указывающие на то, что DIV содержит контент. Итак, как нам реализовать стиль этих маленьких стрелок?

Сначала поместите код CSS

 /*Стрелка вверх*/.to_top { width: 0; height: 0; border-bottom: 10px сплошной #ccc; border-left: 10px сплошной прозрачный; border-right: 10px сплошной прозрачный;}/*Стрелка вниз*/ . to_bottom { ширина: 0; высота: 0; граница сверху: 10 пикселей сплошная #ccc; граница слева: 10 пикселей сплошная граница справа: 10px сплошной прозрачный;}/*стрелка влево*/.to_left { width: 0; border-right: 10px сплошной #ccc; border-top: 10px сплошной прозрачный;} /*Стрелка вправо*/ .to_right { width: 0; height: 0; border-left: 10px Solid #cccf; border-top: 10px Solid прозрачный border-bottom: 10 пикселей сплошной прозрачный;}

HTML-код

 <p>Стрелка вверх</p><div class=to_top></div><p>Стрелка влево</p><div class=to_left></div><p>Стрелка вправо</p>< класс div =to_right></div><p>Стрелка вниз</p><div class=to_bottom></div>

Результаты выполнения кода

Если вы чувствуете, что стрелка слишком большая или слишком маленькая, а цвет не тот, который вам нужен, мы можем настроить размер стрелки, отрегулировав толщину и цвет границы DIV.

Вчера при изменении темы с тремя столбцами некоторые пользователи сообщили, что следует добавить большие стрелки влево и вправо. Хотя это очень просто реализовать (вместо этого вы можете использовать фоновое изображение), но вам нужно добавить функцию фона, которая может настраивать цвет, поэтому я подумал об использовании DIV + CSS для рисования стрелок, чтобы вы могли легко настроить цвет стрелок.

CSS-код

 .text{ display: inline-block; border-top: сплошной 2 пикселя; ширина: 100 пикселей; цвет границы: #EA6000; преобразование: поворот (-135 градусов); авто 100 пикселей;}

HTML-код

<span class=text></span>

Результаты выполнения кода

Мы можем изменить количество стрелок, изменив код ниже C, или мы можем изменить ширину и высоту, чтобы изменить размер стрелки.

transform: rotate(-135deg);/*调整旋转的角度*/

Выше представлен код, который редактор предлагает вам использовать div+CSS для реализации простого значка стрелки в HTML. Надеюсь, он будет вам полезен. Если у вас есть какие-либо вопросы, оставьте мне сообщение, и редактор ответит. к вам вовремя. Я также хотел бы поблагодарить всех за поддержку сайта боевых искусств VeVb!

Если вы считаете, что эта статья вам полезна, вы можете ее перепечатать, укажите источник, спасибо!