Sem imagem, sem alteração no HTML:
Usando bordas dá pra improvisar apenas com CSS, sem precisar de imagem nenhuma:
Edit: a lógica é similar a que o @Jorge B. postou. A diferença básica é o uso dos pseudo-elementos em vez de duas DIVs.
.flecha::after {
display:block;
position:absolute;
content:'';
left:-26px;
top:-3px;
width: 20px;
height: 6px;
background:black;
}
.flecha {
position:relative;
margin-left:20px;
width: 0;
height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 6px solid black;
}
<div class="flecha"></div>
Edit: a lógica é parecida com a da resposta do @Jorge B., mas não precisa de alterações no HTML, pelo uso dos pseudo-elementos em vez de duas DIVs.
Alternativa: imagem embutida no CSS
Se o problema de ter uma imagem é sóo recurso externo, em vez de linkar a imagem, dá pra usar um data URI:
.flecha {
width: 26px;
height: 12px;
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAMCAYAAAB8xa1IAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MzU4Qjk5RDY3M0M3MTFFNEE1NTBBQjM3QUM2QUY2RTAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MzU4Qjk5RDc3M0M3MTFFNEE1NTBBQjM3QUM2QUY2RTAiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozNThCOTlENDczQzcxMUU0QTU1MEFCMzdBQzZBRjZFMCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDozNThCOTlENTczQzcxMUU0QTU1MEFCMzdBQzZBRjZFMCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pjn3yM0AAAElSURBVHjatFQ7boNAEB1g+SMhkGUJqtQpkjrXyB1cWEi+gbsU6aMUlnwb+wT2BXwIpCBYlrxZeR0rpYGRRsuMYN6b4e1YURSRUoosy6JHzfM8/f0wDBw++b5/MfU4xy5oAmuaRpNl67ruE+S9LMve+7434OS4rquDMR3Ztk2O4+gTtZ7btl3jlHEcH5iA6WjBgHD1KJBhzWQB5nMndV1/IA7SNN0CWLP54XeRnMy5nvEkSbZlWRLPC3Dk0owWhuHOBgNJMxtGu6T/rU7tUOB3URQkgiB4hTIEANVY5kwa8l5JKSuOAbKHzCvkSEAMJ6OYiexyBfnK83zDIFre5uaO/Ae3C4tu3jClIzrZ4PlP+mNWkCkihLhfQS9Q2RmTGu5X0K8AAwD5DrixhRb2XAAAAABJRU5ErkJggg==);
}
<div class="flecha"></div>