【问题标题】:Write text over a circle using html and css [closed]使用 html 和 css 在圆圈上写文本 [关闭]
【发布时间】:2013-05-08 17:36:25
【问题描述】:

我想在一个圆圈上写一些文字(我的意思是,文字不会是水平的,但每个字母都会有不同的方向)。 可以使用html和css吗? 谢谢你!

【问题讨论】:

  • 例子?你试过什么?不是制造东西而是修理东西
  • 你可以使用 lettering.js .ref:css-tricks.com/set-text-on-a-circle
  • 做一些谷歌搜索,然后在 SO 上发帖 :)
  • 我想我可以做到,但是在photoshop中制作图像并将其添加为img标签会不会更简单,这样它也可以跨浏览器兼容

标签: html css


【解决方案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

    提供了一个超级演示

    【讨论】:

      猜你喜欢
      • 2021-05-20
      • 2018-07-08
      • 1970-01-01
      • 2021-07-22
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多