Напишите текст над кругом, используя html и css

Question

Я хотел бы написать текст по кругу (я имею в виду, что текст не будет горизонтальным, но каждая буква будет иметь другую ориентацию). Возможно ли использование html и css? Спасибо!

Answer 1

Вы можете, но в конечном итоге вам придется сделать какую-то важную математику для достижения своей цели. Вы хотите использовать следующий CSS в качестве отправной точки.

.rotate { 

/* Safari */ 
-webkit-transform: rotate(-90deg); 

/* Firefox */ 
-moz-transform: rotate(-90deg); 

    /* IE */ 
-ms-transform: rotate(-90deg); 

/* Opera */ 
-o-transform: rotate(-90deg); 

/* Internet Explorer */ 
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 

} 

От css-tricks.com

Answer 2

Существует не очень простой стандартизированный способ установить веб-типа на окружности (или любой другой вид кривой). Но это может быть сделано! Мы рассмотрим один из способов сделать это здесь. Но будьте предупреждены, мы собираемся использовать CSS3 и JavaScript и не давать два hoots о старых браузерах, которые не поддерживают некоторые из необходимых технологий. Если вы заинтересованы в этом для реального проекта, такого рода вещи, вероятно, по-прежнему лучше всего обслуживать и изображение с правильным текстом или правильное обнаружение функций, которые могут отображать изображение для этой причудливой техники в браузерах, которые могут ее обрабатывать. Благодаря css-tricks.com

DEMO

DOWNLOAD FILES

DOCUMENTATION

HTML

<h1> 
    <span class="char1">E</span> 
    <span class="char2">s</span> 
    <span class="char3">t</span> 
    <span class="char4">a</span> 
    <span class="char5">b</span> 
    <!-- you get the idea --> 
</h1> 

CSS

h1 span { 
    font: 26px Monaco, MonoSpace; 
    height: 200px; 
    position: absolute; 
    width: 20px; 
    left: 0; 
    top: 0; 
    transform-origin: bottom center; 
} 

.char1 { transform: rotate(6deg); } 
.char2 { transform: rotate(12deg); } 
.char3 { transform: rotate(18deg); } 
/* and so on */ 

Eсть СУПЕР DEMO ДАЙ ОТHERE