2

本文展示了几种可以在 CSS 中创建的形状。正方形和长方形很容易支持在形状内添加文本。椭圆形和圆形将文本剪掉。三角形不显示任何文本。心脏显示它背后的文字。而且由于添加了文本，钻石看起来不再是钻石了。

有什么不错的方法可以向这些 CSS 形状添加文本吗？有没有比使用浮动 div 将文本放置在 CSS Shape 元素的单独元素中更容易的方法？

一些结果的例子：http: //jsfiddle.net/EVBYt/

4

1 回答 1

2
  • CSS 形状，
  • CSS 形状的安全区域中的文本和
  • CSS 形状中的文本，其中文本将尽可能多地填充可用空间

是三种截然不同的野兽！

您所指的形状具有一个约束条件：使用单个元素。这在某些情况下会导致 0x0 px 元素的背景颜色完全应用于伪元素。显然，在这些情况下，您的文本将无法正确显示，您必须使用其他方法完全重做这些形状。

CSS 区域已由 Adob​​e 向 W3C 提出。只需等待几年的标准化和实施 :)

在这漫长的等待中，大约 10 年前玩过空白 div 的 Tantek Celik 和 Eric Meyer（例如： http: //meyerweb.com/eric/css/edge/curvelicious/demo.html）仍然很重要。
如果您想要实现在 IE8 中用户选择较大文本或在 Firefox 中使用单级缩放文本时会爆炸的设计。虽然可能有流体尺寸em？

如果我被迫将文本设置为如此复杂的形状，我会使用SVG 。

于 2012-09-30T22:41:19.950 回答