Как сделать декоративный элементт?

Question

[Mary Солнечная]

Здравствуйте. Я прочитала, что можно не вырезать из psd макетов элементы, а делать их с помощью css. Подскажите. пожалуйста, как сверстать вот такие стрелочки?
Извиняюсь за некомпетентность в данном вопросе. Буду очень благодарна за помощь

Answer 1

[Михаил Чирский]

Есть замечательный сервис fortawesome.github.io/Font-Awesome
а вот и иконка которая вам нужна fortawesome.github.io/Font-Awesome/icon/chevron-right
на чистом CSS тоже можно, ну не будет такого эффекта, хотя все зависит от задачи)

Comments

[Mary Солнечная]

я сделала, эту получается одна иконка, только цвета разные. Решила сделать простым способом: подключила стили, и вставила классы, только почему-то класс не срабатывает (для двух li он один: "i class="fa fa-chevron-right". Белый показывает, а следующий нет. Почему?

[Михаил Чирский]

MaryT Солнечная: а какая у вас стоит задача? иконка как текст, вы можете применять к нему все тоже, что и к обычному тексту, если я вас правильно понял, и надо менять при :hover, то так и описываем, если не верно понял, поясните плз, а лучше с примером, или хотябы скриншотом

[Mary Солнечная]

куда вам можно в лс написать?

Answer 2

[Andrey Dyrkov]

Есть много способов.

• Вы можете использовать иконочный шрифт, например FontAwsome
  
• Вы можете использовать спрайты
  
• Можите вставить как background-image из спрайта
  
• и др.
  
  

Но без вырезания картинки, используйте готовые иконочные шрифты или собирайте кастомные IconMoon

Answer 3

[Виктор]

Посмотрите как устроены css-иконки, например, в бутстрапе. Что-то наподобии
.icon-th-list {
background-position: -264px 0;
}
и вообще - посмотрите хелп по background-position. Это полезно :-)

Answer 4

[Богдан Герасименко]

Я давно уже не использую на сайтах графику для создания стрелочек и прочих декораций. Для этих целей хорошо подходят иконочные шрифты по типу FontAwesome.

С помощью него вывести такую стрелочку можно написав такой код:
<i class="fa fa-chevron-right"></i>

Само же меню лучше полностью реализовать на CSS:

@import url(http://site.at.ua/css/fontawesome.css); /* Подключили шрифт с иконками */

ul.menu {list-style: none; width: 200px; position: relative;}
ul.menu li a {display: block; line-height: 30px;}
ul.menu a.submenu:before {font: 14px 'FontAwesome'; content: '\f054'; margin: 0 10px; float:right; line-height:30px;}
ul.menu li:hover {background: whitesmoke;}
ul.menu li ul {list-style: none; display: none;position: absolute; top: 0; left: 200px; width: 200px;}
ul.menu li:hover ul {display: block;}

А в HTML только указываем разметку меню:

<ul class="menu">
    <li>
        <a href="#" class="submenu">Подпункт</a>
        <ul>
            <li><a href="#">Ссылка</a></li>
        </ul>
    </li>
    <li><a href="#">Ссылка</a></li>
    <li><a href="#">Ссылка</a></li>
</ul>

Вот целый сайт посвященный дизайну меню.