Как сделать эти стрелки?

Question

[Михаил Паутов]

https://st.fl.ru/projects/upload/201505/f_008554dd...
Вот между мышкой коробкой ну вообщем в центре серые стрелки.
Как их сделать ???
Если не сложно скиньте сайты что-бы в них были типо таких стрелок)

Answer 1

[IceJOKER]

Линии(можно еще и тени картинок) - Фон для блока, а дальше уже позиционируете другие элементы относительно этого блока

Answer 2

[Юрий]

Мне кажется это вообще картинка.
Через canvas там как-нить заморочиться.

Answer 3

[Nikolay Talanov]

Svg Path Q(или C). +можно будет анимировать их отрисвку без проблем.

Comments

[Евгений Петров]

Судя по картинке именно c (или C).

Answer 4

[Leonid Fedotov]

Можно стандартными HTML с CSS3 (2 волшебных свойства: border и border-radius).
В HTML делаете DIV (рядом с нужными Вам мышкой коробкой):
<div class="Arrow TopLeft"></div>
Затем в CSS делаете несколько правил:

.Arrow{
display:block;
position:absolute;
padding:0;
margin:0;
width:300px; // Вам потребуется самостоятельно подправить ширину/высоту
height:250px;
border-radius:50%;
}
.Arrow.TopLeft{
margin:0 0 0 0; // Самостоятельно делаете позиционирование
border-top-left:1px solid #6e6e6e;
}

И так дублируете необходимые субклассы для каждой .Arrow стрелки. Просто, сердито, очень даже векторно без канвасов и SVG :)

Answer 5

[Maksim Zverev]

Чорт :( Serj-One опередил codepen.io/m1skam/pen/KpVqPr

Comments

[Nikolay Talanov]

Бордеры с лесенкой это красиво.

[Maksim Zverev]

Nikolay Talanov: На представленном скриншоте не контрастная с фоном линия, на которой эффект не будет виден.

[Serj-One]

Nikolay Talanov: Если человек задаёт такой вопрос, наняли его явно не за профессионализм, и заметная только при пристальном изучении, небольшая лесенка будет беспокоить заказчика меньше всего.

[Nikolay Talanov]

Serj-One: Мой комментарий был лишь на тему использования css трансформов, из-за которых появляется sub-pixel rendering (лесенка). По идее без трансформа с 2px шириной бордера лесенка если и будет, то менее заметная.

Answer 6

[Евгений Петров]

Берём и делаем. Примерно так