将文本保留在CSS形状中，而不使用空白div

显示了几个可以在CSS中创建的形状。矩形中的正方形很容易支持在形状中添加文本。椭圆形和圆形将文本切掉。三角形不显示任何文本。心脏显示了它背后的文字。因为添加了文本，钻石看起来不再是钻石了

有没有什么像样的方法可以向这些CSS形状添加文本？有什么比使用浮动div将单独元素中的文本定位到CSS Shape元素中更简单的方法吗

一些结果的示例：

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

是三种截然不同的动物

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

由Adobe向W3C提出。标准化和实施只需等待几年：）

在这漫长的等待过程中，10年前与布兰克·迪夫搭档的坦特克·塞利克（Tantek Celik）和埃里克·迈耶（Eric Meyer）（示例：）仍然有关联。
如果你想实现当用户在IE8中选择更大的文本或在Firefox中使用单一级别的缩放文本时会爆炸的设计。虽然在

em

中有流体尺寸，但可能

---

如果我被迫将文本样式设置为如此复杂的形状，我会使用SVG。我知道至少要讨论CSS区域，遗憾的是现在不是。我不想使用图像，所以我想我最终会使用CSS形状上方的浮动div。（这个问题与这个项目有关：）CSS区域现在在[最新的]Safari中得到了支持，但是，看起来我仍然不能用它来完成我想要完成的事情。看来我还是会局限于长方形。我遗漏了什么吗？听起来你想要的是CSS形状，而不是区域。CSS形状现在在Chrome、Safari和Opera中都得到支持-@RazvanCaliman谢谢。是在这个问题和答案9个月后发布的，所以它需要一些更新是的