Tracer des triangles pour un site web

Bonjour, je suis actuellement en train de programmer un site web pour me faire la main, mon projet est un site évènementiel pour un petit festival local. Pour montrer les artistes qui seront présent sur la scène, j'ai pour idée de tracer des triangles dans lesquelles il y aurais la photo des artistes et leur nom, donc tracer des triangles dans lesquels je pourrais insérer de images, mais également que les triangles s'adapte a la résolution
J'ai utilisé un script js que voici :

<canvas id="canvas1" width="1600" height="700"></canvas>

<script>
function init()
{
var canvas = document.getElementById("canvas1");
if(canvas.getContext)
{
var ctx = canvas.getContext("2d");
// Draw triangle
ctx.fillStyle="#A2322E";
ctx.beginPath();
// Draw a triangle location for each corner from x:y 100,110 -> 200,10 -> 300,110 (it will return to first point)
ctx.moveTo(300,440);
ctx.lineTo(500,700);
ctx.lineTo(700,440);
ctx.closePath();
ctx.fill();
}
}
onload=init;
</script>

Mais justement les coordonnées des trois angles du triangle doivent être donné en pixels et donc pas d'adaptation par rapport à la résolution.. Autre problème, le triangles est tracer dans un canvas or les canvas se superpose et sont forcément rectangle, donc si je trace plusieurs canvas, ils vont s'empiler et cacher un bout du triangle (cf la photo, je souhaite faire des suites de 3 triangles par "ligne" avec la base positionnée en haut, puis en bas puis en haut)

Je ne sais pas si c'est possible de faire cela en html/css ou en js, ou si il faut utiliser un autre langage web plus "puissant"

Merci d'avance de votre aide et de vos retour, à bientôt !