Une méthode pour restituer dynamiquement des secteurs circulaires sans utiliser de canevas HTML5

Question

Je fabrique une roue de fortune et je dois créer une roue ou un cercle en fonction du nombre de secteurs et la remplir avec le nom du prix.

J'ai complété le code d'un cercle avec un nombre fixe de secteurs. Voici un exemple de cercle contenant 6 secteurs.

.wheel_container {
  position : relative ;
  
  --taille de la roue : 360 px ;
  largeur: var(--wheel-size);
  hauteur : var(--wheel-size);
  
  marge inférieure : 2,4em ;
}

.roue {
  affichage : flexible ;
  justifier-contenu : centre ;
  
  position : relative ;
  débordement caché;
  
  largeur : 100 % ;
  hauteur : 100 % ;
  
  rayon de bordure : 50 % ;
  couleur de fond : aigue-marine ;
  --segment-deg : 60deg ;
}

.roue div {
  affichage : flexible ;
  justifier-contenu : centre ;
  aligner les éléments : centre ;
  
  position : absolue ;
  
  largeur : calc((2 * 3.141592653589793 * (var(--wheel-size) / 2)) / 6);
  hauteur : 50 % ;
  chemin de détourage : polygone (0 0, 50 % 100 %, 100 % 0 );
  
  transformation-origine : bas ;
  mode d'écriture : vertical-rl ;
}

.wheel div >
  poids de la police : 500 ;
  taille de police : 1rem ;
  alignement du texte : centre ;
  couleur : rgba(0, 0, 0, 0,7) ;
}

.wheel div:ntième-enfant(1) {
  couleur de fond : beige ;
  transformation : rotation(calc(-1 * var(--segment-deg) / 2));
}

.wheel div:ntième-enfant(2) {
  couleur de fond : bleu-violet ;
  transformation : rotation(calc(-3 * var(--segment-deg) / 2));
}

.wheel div:ntième-enfant(3) {
  couleur de fond : pourpre ;
  transformation : rotation(calc(-5 * var(--segment-deg) / 2));
}

.wheel div:ntième-enfant(4) {
  couleur de fond : orange ;
  transformation : rotation(calc(-7 * var(--segment-deg) / 2));
}

.wheel div:ntième-enfant(5) {
  couleur d'arrière-plan : violet ;
  transformation : rotation(calc(-9 * var(--segment-deg) / 2));
}

.wheel div:ntième-enfant(6) {
  couleur de fond : jaune ;
  transformation : rotation(calc(-11 * var(--segment-deg) / 2));
}

  

    
Pomme
    
Durien
    
Banane
    
Mango
    
Fraise
    
Jacquier
  




J'ai essayé de déterminer la propriété width du .wheel div Cependant, cela ne fonctionne pas car le polygone dans clip-path n'est pas courbé, alors que le 
 

J'ai pu obtenir l'effet souhaité avec 6 cercles sectoriels en ajoutant quelques pixels à la largeur de 
. 



.wheel_container {
  position : relative ;
  --taille de la roue : 360 px ;
  largeur: var(--wheel-size);
  hauteur : var(--wheel-size);
  marge inférieure : 2,4em ;
}

.roue {
  affichage : flexible ;
  justifier-contenu : centre ;
  position : relative ;
  débordement caché;
  largeur : 100 % ;
  hauteur : 100 % ;
  rayon de bordure : 50 % ;
  couleur de fond : aigue-marine ;
  --segment-deg : 60deg ;
}

.roue div {
  affichage : flexible ;
  justifier-contenu : centre ;
  aligner les éléments : centre ;
  position : absolue ;
  
  /* Modification */
  largeur : calc((2 * 3.141592653589793 * ((var(--wheel-size) + 37px) / 2)) / 6);
  hauteur : 50 % ;
  chemin de détourage : polygone (0 0, 50 % 100 %, 100 % 0 );
  transformation-origine : bas ;
  mode d'écriture : vertical-rl ;
}

.wheel div>span {
  poids de la police : 500 ;
  taille de police : 1rem ;
  alignement du texte : centre ;
  couleur : rgba(0, 0, 0, 0,7) ;
}

.wheel div:ntième-enfant(1) {
  couleur de fond : beige ;
  transformation : rotation(calc(-1 * var(--segment-deg) / 2));
}

.wheel div:ntième-enfant(2) {
  couleur de fond : bleu-violet ;
  transformation : rotation(calc(-3 * var(--segment-deg) / 2));
}

.wheel div:ntième-enfant(3) {
  couleur de fond : pourpre ;
  transformation : rotation(calc(-5 * var(--segment-deg) / 2));
}

.wheel div:ntième-enfant(4) {
  couleur de fond : orange ;
  transformation : rotation(calc(-7 * var(--segment-deg) / 2));
}

.wheel div:ntième-enfant(5) {
  couleur d'arrière-plan : violet ;
  transformation : rotation(calc(-9 * var(--segment-deg) / 2));
}

.wheel div:ntième-enfant(6) {
  couleur de fond : jaune ;
  transformation : rotation(calc(-11 * var(--segment-deg) / 2));
}

  

    
Pomme
    
Durien
    
Banane
    
Mango
    
Fraise
    
Jacquier
  




Cependant, le code qui fonctionne pour 6 secteurs ne fonctionnera pas pour 8 secteurs et ainsi de suite...
Je pense que la solution pourrait résider dans les règles de remplissage SVG en utilisant clip-path. Cependant, mes connaissances en SVG sont limitées et j'ai besoin d'aide. D'autres solutions sont également les bienvenues. 

Answer 1

Le problème que vous rencontrez est le calcul .wheel div 的宽度和高度的方式不正确。如果高度是圆的半径：--radius: calc(var(--wheel-size) / 2 );，那么宽度就是 width: calc( 2 * var(--radius ) / 1.732);，其中 1.732 是 Math.sqrt(3). Cela fonctionne pour une roue à 6 parties, où le triangle (pour le chemin de détourage) est un triangle équilatéral.

Dans votre exemple, la largeur est égale au rayon. Cela ne suffit pas car le div dépasse le cercle et vous avez calculé le chemin de détourage en fonction de la taille du div.

Pour voir ce qui se passe, supprimez border-radius : 50 % ; et ajoutez une partie semi-transparente non clipsée à la roue (clip-path : none ;)

console.log(Math.sqrt(3))

*{margin:0;padding:0}


.wheel_container {
  position: relative;
  
  --wheel-size: 360px;
  width: var(--wheel-size);
  height: var(--wheel-size);
  
  margin-bottom: 2.4em;
}

.wheel {
  display: flex;
  justify-content: center;
  
  position: relative;
  overflow: hidden;
  
  width: var(--wheel-size);
  height: var(--wheel-size);
  
  border-radius: 50%;
  background-color: aquamarine;
  --segment-deg: 60deg;
}

.wheel div {
  display: flex;
  justify-content: center;
  align-items: center;
  
  position: absolute;
  
  
  --radius: calc(var(--wheel-size) / 2 );
  height: var(--radius);
  
  width: calc( 2 * var(--radius ) / 1.732);
  clip-path: polygon(0 0, 50% 100%, 100% 0);
  
  transform-origin: bottom;
  writing-mode: vertical-rl;
}

.wheel div > span {
  font-weight: 500;
  font-size: 1rem;
  text-align: center;
  color: rgba(0, 0, 0, 0.7);
}

.wheel div:nth-child(1) {
  background-color: beige;
  transform: rotate(calc(-1 * var(--segment-deg) / 2));
}

.wheel div:nth-child(2) {
  background-color: blueviolet;
  transform: rotate(calc(-3 * var(--segment-deg) / 2));
}

.wheel div:nth-child(3) {
  background-color: crimson;
  transform: rotate(calc(-5 * var(--segment-deg) / 2));
}

.wheel div:nth-child(4) {
  background-color: orange;
  transform: rotate(calc(-7 * var(--segment-deg) / 2));
}

.wheel div:nth-child(5) {
  background-color: violet;
  transform: rotate(calc(-9 * var(--segment-deg) / 2));
}

.wheel div:nth-child(6) {
  background-color: yellow;
  transform: rotate(calc(-11 * var(--segment-deg) / 2));
}


..wheel div {transform:none!important}

<div class='wheel_container'>
  <div class='wheel'>
    <div><span>Apple</span></div>
    <div><span>Durian</span></div>
    <div><span>Banana</span></div>
    <div><span>Mango</span></div>
    <div><span>Strawberry</span></div>
    <div><span>Jackfruit</span></div>
  </div>
</div>

Pour faire une roue à 8 segments, vous aurez besoin d'un --segment-deg:45 et d'un autre .wheel div 的宽度。我使用的是 width: calc( 2 * var(--radius ) / 2.414);, où 2,414 est la tangente de (180 - 45) / 2.

let a = 67.5;
const rad = Math.PI / 180;

console.log((Math.tan( a * rad)))

*{margin:0;padding:0}


.wheel_container {
  position: relative;
  
  --wheel-size: 360px;
  width: var(--wheel-size);
  height: var(--wheel-size);
  
  margin-bottom: 2.4em;
}

.wheel {
  display: flex;
  justify-content: center;
  
  position: relative;
  overflow: hidden;
  
  width: var(--wheel-size);
  height: var(--wheel-size);
  
  border-radius: 50%;
  background-color: aquamarine;
  --segment-deg: 45deg;
}

.wheel div {
  display: flex;
  justify-content: center;
  align-items: center;
  
  position: absolute;
  
  
  --radius: calc(var(--wheel-size) / 2 );
  height: var(--radius);
  
  width: calc( 2 * var(--radius ) / 2.414);
  clip-path: polygon(0 0, 50% 100%, 100% 0);
  
  transform-origin: bottom;
  writing-mode: vertical-rl;
}

.wheel div > span {
  font-weight: 500;
  font-size: 1rem;
  text-align: center;
  color: rgba(0, 0, 0, 0.7);
}

.wheel div:nth-child(1) {
  background-color: beige;
  transform: rotate(calc(-1 * var(--segment-deg) / 2));
}

.wheel div:nth-child(2) {
  background-color: blueviolet;
  transform: rotate(calc(-3 * var(--segment-deg) / 2));
}

.wheel div:nth-child(3) {
  background-color: crimson;
  transform: rotate(calc(-5 * var(--segment-deg) / 2));
}

.wheel div:nth-child(4) {
  background-color: orange;
  transform: rotate(calc(-7 * var(--segment-deg) / 2));
}

.wheel div:nth-child(5) {
  background-color: violet;
  transform: rotate(calc(-9 * var(--segment-deg) / 2));
}

.wheel div:nth-child(6) {
  background-color: yellow;
  transform: rotate(calc(-11 * var(--segment-deg) / 2));
}


.wheel div:nth-child(7) {
  background-color: red;
  transform: rotate(calc(-13 * var(--segment-deg) / 2));
}

.wheel div:nth-child(8) {
  background-color: blue;
  transform: rotate(calc(-15 * var(--segment-deg) / 2));
}

<div class='wheel_container'>
  <div class='roue'>
    <div><span>Pomme</span></div>
    <div><span>Durien</span></div>
    <div><span>Banane</span></div>
    <div><span>Mango</span></div>
    <div><span>Fraise</span></div>
    <div><span>Jacquier</span></div>
    
    <div><span>rouge</span></div>
    <div><span>bleu</