Как сделать стрелку на css?

Question

[rhost]

Как можно сделать такую вот стрелку ?


Карта не статичная (google map), стрелку можно перемещать влево\вправо

Answer 1

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

Это нетрудно. Примерно так jsfiddle.net/petroveg/k4guLL6g
Смысл в двух скошенных элементах, внутри которых элементы (псевдоэлементы) скошены в обратную сторону.
Ну а картинку-то положить, чтобы позиционировалась от одной точки — тьфу и растереть:)

Comments

[rhost]

во, вот что мне было нужно)) я не мог как раз положить нормально картинку и сделать так, чтобы все обрезалось, спасибо.

Answer 2

[Андрей Б.]

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

Comments

[rhost]

Андрей Б. извиняюсь что не написал изначально, карта не статичная ммм думаю вырезать не вариант.

[Андрей Б.]

Роман ну и пусть, я же говорю, вы вырежьте только эту часть скрин - www.awesomescreenshot.com/image/40163/a2d6dab600b8...
Уголок не вырезайте, сделайте прозрачным. Получается у вас будет прямоугольник с вырезанным уголком по середине, накладываете это на карту и будет эффект что у карты есть уголок.

[Андрей Б.]

Николай Петюх да? как интересно вы сделаете уголок с картой? Никак, только имитировать этот эффект, путем наложения сверху слоя с вырезанным уголком. Либо можно сделать так jsfiddle.net/v7vmhqfn

[Андрей Б.]

Но это если нет фона в виде изображений.

[rhost]

Андрей Б.: "стрелку можно перемещать влево\вправо" )

[Андрей Б.]

Роман Пристрелите дизайнера )

[Андрей Б.]

Роман и зачем её перемещать, впервые такое вижу

[rhost]

Андрей Б.: ну...там адреса )) кликаем на адрес...карта меняется и стрелка перемещается под выбранный адрес

[Андрей Б.]

Роман значит вырезайте под разные состояния, другого способа я тут не вижу