Circular Text with CSS?

How to Bend and Set Text on a Circle With CSS - 1stWebDesigner

Set Text On A Circle | CSS-Tricks

csswarp.eleqtriq.com

h1 a > span:nth-child(1) [style*=--index] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(calc(360deg / var(--total)* var(--index))) translateY(calc(var(--radius, 7)* -1ch));
}

Pour passer d'un arc simple à un arc inversé (Reversed Arc), il faut inverser l'orientation de la transformation appliquée aux caractères. Voici comment modifier ton code CSS :

Modification :

• Inverser la rotation en ajoutant un `` devant l'angle.
• Inverser le translateY, qui déplace les lettres vers l'extérieur du cercle.

h1 a > span:nth-child(1) [style*=--index] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(calc(-360deg / var(--total) * var(--index))) translateY(calc(var(--radius, 7) * 1ch));
}

Explication :

• rotate(calc(-360deg / var(--total) * var(--index))) → la rotation est inversée.
• translateY(calc(var(--radius, 7) * 1ch)) → la direction de la translation est également inversée pour former un arc inversé.

Essaie ce code et dis-moi si cela correspond à l'effet souhaité ! 😊