Simple SVG arrow

by red_lebowski

HTML

<svg height="210" width="500">
  <defs>
    <marker id="markerArrow" markerWidth="13" markerHeight="13" refX="2" refY="6"
            orient="auto">
      <path d="M2,2 L2,11 L10,6 L2,2" style="fill: #000000;" />
    </marker>
  </defs>

  <line x1="0" y1="0" x2="200" y2="100" class="arrow" />
</svg>

CSS

.arrow{
  stroke:rgb(0,0,0);
  stroke-width:2; 
  marker-end:url(#markerArrow)
}