Tracer des triangles pour un site web

Résolu/Fermé
Niellen Messages postés 6 Date d'inscription lundi 22 février 2016 Statut Membre Dernière intervention 17 mars 2016 - 22 févr. 2016 à 11:00
Niellen Messages postés 6 Date d'inscription lundi 22 février 2016 Statut Membre Dernière intervention 17 mars 2016 - 24 févr. 2016 à 14:02
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 !

2 réponses

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 546
Modifié par Pitet le 24/02/2016 à 14:00
Salut,

Voici deux exemples de solutions possibles en css :
http://codepen.io/zajonsss/pen/nzCie
http://codepen.io/mikehobizal/pen/EHDsu

Bonne journée,
1
Niellen Messages postés 6 Date d'inscription lundi 22 février 2016 Statut Membre Dernière intervention 17 mars 2016
24 févr. 2016 à 14:02
Merci beaucoup, c'est exactement ce que je cherchais !
Je passe le topic en résolu, encore merci, bonne journée !
0
Niellen Messages postés 6 Date d'inscription lundi 22 février 2016 Statut Membre Dernière intervention 17 mars 2016
24 févr. 2016 à 12:42
UP SVP
0