Forum : Besoin d'aide pour un projet de débutant

Okay, bon.
Je cherche à réaliser une petite page web permettant de jouer à la roue de la fortune.
Cependant, j'ai un soucis digne d'un débutant, et même en cherchant sur Internet, j'ai du mal à trouver comment faire, mais je suis sur que quelqu'un qui s'y connais mieux y arriverait facilement.

J'ai une flèche noire qui indique la case séléctionnée.
Le problème, c'est que ma flèche noire n'est pas fixée à ma roue. Ce qui fait que lorsque je change la taille de ma fenêtre, la flèche est à un endroit différent sur l'axe horizontal. J'ai tout essayé, balise relative, absolute, sticky etc ...

.wheel-container { display: flex; flex-direction: column; align-items: center; margin-top: 50px; } .wheel { width: 300px; height: 300px; border: 5px solid #333; border-radius: 50%; position: relative; transform: rotate(0deg); transition: transform 5s cubic-bezier(0.17, 0.67, 0.83, 0.67); } .wheel-container { text-align: center; position: relative; } #wheel-canvas { transform-origin: center; transition: transform 5s ease-out; } .arrow-black { position: absolute; top: 200px; left: 59%; transform: translateX(-50%); width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 20px solid rgb(0, 0, 0); z-index: 2; rotate: 90deg; }

Ce que je veux

Mon composant arrow-black collé à ma roue, sur tous les axes, peut importe la taille de l'écran

Ce que j'obtiens

Une flèche qui bouge au grès de mes zooms

2 réponses

Glioburd,

il y a 2 ans

Hello, si tu peux nous montrer ton HTML qui va avec, histoire qu'on puisse reproduire instantanément ton cas !
Idéalement nous montrer ton projet sur jsFiddle ou CodePen.

SoySoy,

il y a 2 ans

Hello ! Voilà mon HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Spin the Wheel Game</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="wheel-container"> <canvas id="wheel-canvas" width="300" height="300"></canvas> <div id="result" class="hidden">Result: <span id="result-value"></span></div> </div> <div class="arrow"></div>  <div class="arrow arrow-black"></div> <div id="spin-container"> <button id="spin-button">Spin</button> <p id="spin-message" class="hidden">La roue a déjà été tournée</p> </div> <script src="script.js"></script> </body> </html>

Et voilà la totalité de mon CSS

body { font-family: Arial, sans-serif; text-align: center; background-color: #f0f0f0; } .wheel-container { display: flex; flex-direction: column; align-items: center; margin-top: 50px; } .wheel { width: 300px; height: 300px; border: 5px solid #333; border-radius: 50%; position: relative; transform: rotate(0deg); transition: transform 5s cubic-bezier(0.17, 0.67, 0.83, 0.67); } .wheel-segment { position: absolute; width: 0; height: 0; border-left: 150px solid transparent; border-right: 150px solid transparent; border-bottom: 150px solid #ffc107; transform-origin: center bottom; /* Ajustement du centre de rotation */ } .wheel-segment:nth-child(1) { transform: rotate(40deg); } .wheel-segment:nth-child(2) { transform: rotate(80deg); } /* Répéter pour les autres segments en ajustant les angles */ #spin-button { margin-top: 20px; padding: 10px 20px; font-size: 18px; background-color: #4CAF50; color: #fff; border: none; cursor: pointer; border-radius: 5px; } .hidden { display: none; } .wheel-container { text-align: center; position: relative; } #wheel-canvas { transform-origin: center; transition: transform 5s ease-out; } .hidden { display: none; } .arrow-black { position: absolute; top: 200px; left: 59%; transform: translateX(-50%); width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 20px solid rgb(0, 0, 0); z-index: 2; rotate: 90deg; }