Несколько стрелок в tooltip'e

[Cryolite]

Добрый день.

Подскажите пожалуйста, как можно решить проблему.

Имеется блок фиксированной (кратной) ширины. Необходимо сделать несколько стрелок снизу блока. Но с помощью after и before можно сделать максимум 2. В моем случае оба используются для 1 стрелки.

.arr {

position:relative;

margin-bottom: 5px;

}

.arr:after {

content: '';

width: 0px;

height: 0px;

border-style: solid;

border-width: 10px 10px 0 10px;

border-color: green transparent transparent transparent;

position: absolute;

margin-left: -10px;

left: 50%;

margin-top: -1px;

}

/*имитация border*/

.arr:before {

content: '';

width: 0px;

height: 0px;

border-style: solid;

border-width: 10px 10px 0 10px;

border-color: red transparent transparent transparent;

position: absolute;

margin-left: -10px;

left: 50%;

top: 100%;

margin-top: -5px;

}

Как оптимальнее всего сделать, скажем, 3 стрелки через равный промежуток для широкого блока?

_______________

| |

| |

| |

—————--

\/ \/ \/

[SelenIT]

Как вариант.

[Cryolite]

Как вариант.

Большое спасибо!