SVG Line and Arrow with data boxes

Using SVG path

HTML

<div class="box">
    <div class='label'>Total</div>
    <div class='value'>200</div>
</div>

<div id='fred'>
<svg xmlns="http://www.w3.org/2000/svg"   overflow="visible" width="100%" height="100%" >
<defs>
 <marker id='head' orient="auto"
    markerWidth='2' markerHeight='4'
    refX='0.1' refY='2'>
    <path d='M0,0 V4 L2,2 Z' />
  </marker>
      <ref id="X1" param="x" default='20'/>
        <ref id="X2" param="x" default='40' />
      <ref id="X3" param="x"  default='60'/>
</defs>

    
<path
  id='arrow-line0'
  stroke-width='3'
  fill='none' stroke='grey'  
  d='M200,0 V40'
  />
<path
  class='shadow'
  id='arrow-line1'
  marker-end='url(#head)'
  stroke-width='3'
  fill='none' stroke='grey'  
  d='M200,20 H400 V40'
  />    
<path
  id='arrow-line2'
  marker-end='url(#head)'
  stroke-width='3'
  fill='none' stroke='grey'  
  d='M200,20 V40'
  />
<path
  id='arrow-line3'
  marker-end='url(#head)'
  stroke-width='3'
  fill='none' stroke='grey'  
  d='M200,20 H7 V40'
  />
    
 
</svg>
</div>
    
<div class="col">
<div class="box">
    <div class='label'>FF</div>
    <div class='value'>33</div>
</div>
</div>
<div class="col">
<div class="box">
    <div class='label'>IE</div>
    <div class='value'>11</div>
</div>
</div>
<div class="col">
<div class="box">
    <div class='label'>Chrome</div>
    <div class='value'>214</div>
</div>
</div>

CSS

body{font-family:arial;}
.col {float:left;width:32%}
.box {
        height: 40px;
        width:160px;
        margin:0px auto;
        -moz-border-radius: 10px;
        border-radius: 10px;
        background-color:#3079CF;
        -webkit-box-shadow: 2px 2px 2px 2px #999999;
        box-shadow: 2px 2px 2px 2px #999999;
        padding:6px;
        color:#FFFFFF;
        background: -webkit-linear-gradient(#30A9FF, #3079CF); /* Safari 5.1 to 6.0 */
        background: -o-linear-gradient(#30A9FF, #3079CF); /* Opera 11.1 to 12.0 */
        background: -moz-linear-gradient(#30A9FF, #3079CF); /* Firefox 3.6 to 15 */
        background: linear-gradient(#30A9FF, #3079CF); /* Standard syntax */

}
sevg .shadow { cursor:crosshair; 
        -moz-box-shadow: -5px -5px 5px #888;
        -webkit-box-shadow: -5px -5px 5px #888;
        box-shadow: -15px -15px 15px #888; 
            }   

.value {
        color:#000;
        margin-top:5px;
        float:right;
        height: 30px;
        width:80px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        background-color:#F8F8FF;
        line-height:30px;
        text-align:center;
}

.label {
    float:left;
    margin-top:10px;
    text-align:center;
    width:50%;
}
#fred {wposition:absolute;left:100px;top:100px;width:405px;height:46px;margin:0px auto;}