Tu idea es una posibilidad. Aporto otra:
<a class="conTriangulo" href="enlace.html"><img class="triangulo" src="triangulo.gif"/>Texto de mi enlace</a>
y el siguiente CSS:
img.triangulo {
width:50px;
height:50px;
position:relative;
bottom:-50px; /*el alto de la imagen */
left: 50px; /*La cantidad que quieras */
}
a.conTriangulo{
display:block; /* para que se vea como un cuadrado */
background:#456;
padding-right:50px; /* La imagen con posición relativa deja un hueco que hay que equilibrar */
}
Y otra variación sobre el tema, ésta con posición absoluta:
img.triangulo {
width:50px; /* El tamaño de la imgen */
height:50px;
position:absolute;
bottom:-50px; /*el alto de la imagen */
left: 50px; /*La cantidad que quieras */
}
a.conTriangulo{
display:block; /* para que se vea como un cuadrado */
background:#456;
position:relative; /* queremos que la imagen se posicione respecto al enlace*/
}
Son esquemas básicos, tendras que darles forma según tus necesidades.