К картинке стилей не привяжешь, здесь в примере это div class="ratehead".
.

<style>
.ratebox {
    width: 200px;
}

.ratebox span {
    display: block;
    text-align: center;
    padding: 3px 0;
    font-weight: bold; 
}

.current:before, .previous:before {
    content: "$";
} 
 
/*правила для знака доллара*/
.ratebox span:before {
    margin-right: 10px;
}
 
/*общие правила для стрелок*/
.ratebox span:after {
    margin-left: 10px;
}
 
/*правила для стрелки вверх*/
.up:after {
    content: "▲";
    color: #0f0; /*зеленый цвет*/
}
  
/*правила для стрелки вниз*/
.down:after {
    content: "▼";
    color: #f00; /*красный цвет*/
}
 
.ratehead {
    background-color: #3CA0D9;
}

.ratehead * {
    color: #fff;
}

.ratehead *:after {
    color: #fff; /*белый цвет стрелки*/
}
 
</style>
 
<div class="ratehead"><span class="current"></span></div>
 
<div class="ratebox">
 <span class="current"></span>
 <span class="previous"></span>
</div>
 
 
<script>
$.getJSON("http://domain.ru", function(data) {
    $.each(data, function(k, o) {
        $('.'+k).text(o.value).addClass(['down','up'][o.rate])
    })
});
</script>

Это не для стрелок, а управление правами каталога.

laimas,

https://pp.userapi.com/c840631/v8406...rWkzdMhN0E.jpg

всё сломалось.

А как сделать курс текущий?

Забыл домен вставить

https://pp.userapi.com/c840631/v8406...LNHHjw-MXY.jpg

Когда я захожу на доммен мне выводится типа json это будет всем доступно и все будут пользоватся?

Я не знаю чего вы там у себя творите, это сами разбирайте, а вот как все выглядит на локальном сервере, с указанной ранее версткой, стилями и js измененном.

Если в браузере набирать адрес, то да, будет показан json, но доступ к нему скриптами на странице будет блокирован.

Можно и в барузере запретить вывод json.

А это и у вас синяя полоска,

а ещё стрелку можно в верхний блок сделать и фон прозрачный?

58.17 - стрелку динамики?

как в браузере запретить, стало интересно?

Это сюда, читать, изучать, пробовать. Пример я привел, дальше сами.