使用html和css在圆圈上书写文本

我想在圆圈上写一些文字（我的意思是，文字不会是水平的，但每个字母都有不同的方向）。 可以使用html和css吗？

---

谢谢你

你可以，但最终你必须做一些主要的数学来完成你的目标。您将希望使用以下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

没有任何超级简单的标准化方法来设置圆（或任何类型的曲线）上的web类型。但这是可以做到的！我们将在这里探索一种方法。但是要预先警告一下，我们将使用一些CSS3和JavaScript，对于不支持某些必要技术的旧浏览器，我们不会大惊小怪。如果你对一个真实的项目感兴趣，这类事情可能最好还是通过适当的alt文本和图像来实现，或者适当的特征检测，可以在浏览器中处理这种奇特的技术，从而翻转图像感谢css tricks.com

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>

---

示例中有一个超级演示？你试过什么？我们不是制作东西而是修复东西你可以使用letting.js.ref:在你发布之前做一些谷歌搜索，所以：）看，我可以做到，我想，但在photoshop中制作一个图像并将其添加为img标记不是更简单吗？这样，它也可以跨浏览器兼容

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 */