Как сделать стрелки для меню?

Question

[ayapergenov]

Как можно реализовать такие стрелки для меню, например с помощью шрифта или css?

Comments

[Moskus]

"Такие" - это с пунктирной прямой линией, или вам вообще стрелки нужны?

[ayapergenov]

Нет мне важно реализовать их с помощью css а не картинками.

[ayapergenov]

Дайте пример, пожалуйста

Answer 1

[xmoonlight]

так

Comments

[ayapergenov]

Спасибо, дружище!

[xmoonlight]

ayapergenov: не за что) фигня вопрос)

Answer 2

[Denis Smirnov]

При помощи тега div используя градиенты. Посмотрите, как сделаны элементы здесь: a.singlediv.com

Comments

[ayapergenov]

А где пояснение? Пока вижу только готовые решения.

[ayapergenov]

А где можно посмотреть примеры кода и теорию?

[Denis Smirnov]

Чтобы реализовать эти стрелочки исключительно средствами CSS, вам необходимо научиться использовать градиенты применительно к блочным тэгам, это примеры реализации.
Вы также можете использовать Unicode: ← ↑ → ↓ ↔ ↕ ⇆ ⇅
Как вариант, border: 1px dashed;

[Denis Smirnov]

https://css-tricks.com/examples/CSS3Gradient/
gering111.com/gradientyi-css3
Еще про box-shadow почитайте.

Answer 3

[Александр Логинов-Солоницын]

А чем плох вариант замены стандартных точек в списке на свою картинку?
например:
li { background: url(images/ul.png) no-repeat left top; list-style: none; }
ну или иконочными шрифтами воспользоваться, например fortawesome.github.io/Font-Awesome/icons

Comments

[Denis Smirnov]

у него такое ограничение :)

[Александр Логинов-Солоницын]

Я правда не понимаю, зачем из мухи слона делать... Картинка стрелочки будет грузиться наверное столько же, сколько будет рендериться css, которым эту стрелку напишут.

[ayapergenov]

Я бы хотел иконочный шрифт. Но где взять именно такой?

[ayapergenov]

У меня задача сделать все именно на css3 и html5

[Denis Smirnov]

ayapergenov: Если задача использовать HTML5 и CSS3, используйте мой вариант. Если же это не ограничение, то используйте вариант Александра.

[ayapergenov]

Спасибо, буду разбираться. Хоть понятно в какую сторону копать.

[Denis Smirnov]

Александр Логинов-Солоницын: В утверждении что стрелочки будут грузиться столько же, сколько рендерится CSS вы ошибаетесь, так как не учитываете время, необходимое браузеру на отправку запроса, а серверу - на его обработку.

[Александр Логинов-Солоницын]

Denis Smirnov: да, но если страница грузится 3 сек, то юзер не увидит разницы. Я это имел ввиду.Да и энергозатраты мастера тоже нужно учитывать. В этом случае картинка выигрывает)) Я конечно не углублялся в кеш браузеров, но мне кажется, что по логике изображение ложится в кеш при первой загрузке страницы и берется уже из кеша.

[Denis Smirnov]

ayapergenov: именно, т.к. я не собираюсь рисовать стрелочки на CSS3 за вас ;)

[Denis Smirnov]

Александр Логинов-Солоницын: изображение ложится в кэш в зависимости от настроек сервера, на котором оно находится. Если страница грузится 3 сек - это плохая страница.

[Александр Логинов-Солоницын]

Denis Smirnov: "Если страница грузится 3 сек - это плохая страница" - ну почему же, в реалиях нашего жуткого интернета рендер за 3 сек считается хорошим показателем.

[Denis Smirnov]

Александр Логинов-Солоницын: Где? s7.hostingkartinok.com/uploads/images/2015/06/93d7...
у меня с сентября 2014 гигабитный инет, оптоволокно..

[Александр Логинов-Солоницын]

)) https://yadi.sk/i/kX_CykrKh7H2Q

Answer 4

[alik203999]

Добрый день помогите добавить стрелочку с использованием спец символа, зеленым цветом или синим, к меню которое выпадает, ниже названия меню по центру. Как на этом скриншоте.

Заранее спасибо. Вот ссылка на сам сайт где и находится это верхнее меню. https://kaknastroit.com/