Указатель-стрелка на чистом CSS

[ex_lucy_whe]

Задача: сверстать указатель следующего вида



Плюсы:

• Поддержка ie8
• Чистый CSS без картинок
• Гибкость масштабирования

Минусы:

• Возможные проблемы рендеринга
• Лишняя разметка
• Нельзя использовать на неоднородном фоне.

Описанный мной способ - это вариация всем известного метода имитации треугольников на CSS. С той лишь разницей, что в нашем случае будет не один треугольник, а три.

Для этого представим наш указатель в виде треугольников:



Таким образом нам нужно создать один блок с фоном цвета нашей стрелки (темно-серый) и внутри этого блока разместить три треугольника цвета фона родительского блока (светло-серый):

1. Слева и по высоте равен высоте стрелки.
2. Справа вверху, по высоте в половину стрелки.
3. Справа внизу, по высоте в половину стрелки.

Посмотреть реализацию можно по ссылке:

http://jsfiddle.net/lucy_wheel/nx6ZA/

! Для стрелки, указывающей в другую сторону, нужно лишь заменить значения границ для треугольников и позицию элементов. Хотя, если вам не требуется поддержка ие8, можно использовать css transform свойство scaleZ(-1)