Как согнуть текст по картинке css?

Question

Я хочу сделать инпут, и текст который туда введен при нажатии кнопки вставал по дуге картинки, вот исходный круг

и псоле ввода текста в инпут и нажатии кнопки, должно произойти примерно такое

Answer 1

document.querySelector(".circle").innerHTML = "1 2 3 4 5 6 7 8 9"
  .split("")
  .map((e, i) => `<span style="--rot:${i * -8}deg">${e}</span>`)
  .join("");

.circle {
  margin: 100px auto;
  width: 200px;
  height: 200px;
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  transform: rotate(65deg);
  border:1px solid black;
}

span {
font-size:20px;
  z-index: 9;
  display: inline-flex;
  justify-content: center;
  align-items: flex-end;
  width: 30px;
  height: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(var(--rot));
}

<div class="circle"></div>

БЛОГ НА HUSL

Как согнуть текст по картинке css?

Ответы (1 шт):