Question

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

Answer 1

没有任何超级简单的标准化方法可以在圆圈（或任何类型的曲线）上设置网页类型。但这是可以完成的！我们将在这里探索一种方法。但是要预先警告，我们将使用一些CSS3和JavaScript，并且不会对不支持某些所需技术的旧浏览器提出两个警告。如果你对一个真实的项目感兴趣，这种事情可能仍然是最好的服务和图像与正确的alt文本，或适当的功能检测，可以在可以处理它的浏览器中翻转图像的这种奇特的技术。 感谢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 */

有一个超级演示来自 HERE

Answer 2

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

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

2 个答案: