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
1 réponse
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.
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>
<!-- Ajoutez cette div pour la nouvelle flèche -->
<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;
}