使用 html 和 css 在圆圈上写文本 [关闭]

Posted 2023-03-05

【中文标题】使用 html 和 css 在圆圈上写文本 [关闭]

【英文标题】：Write text over a circle using html and css [closed]

【发布时间】：2013-05-08 17:36:25

【问题描述】：

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

【问题讨论】：

例子？你试过什么？不是制造东西而是修理东西

你可以使用 lettering.js .ref:css-tricks.com/set-text-on-a-circle

做一些谷歌搜索，然后在 SO 上发帖 :)

见tympanus.net/Development/Arctext

我想我可以做到，但是在photoshop中制作图像并将其添加为img标签会不会更简单，这样它也可以跨浏览器兼容

【参考方案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

【参考方案2】：

没有任何超级简单的标准化方法可以在圆形（或任何类型的曲线）上设置网页类型。但这是可以完成的！我们将在这里探索一种方法。但请注意，我们将使用一些 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

提供了一个超级演示