在不扭曲形状/阴影的情况下向图形添加文本。 CSS

【问题标题】：Adding Text to figure without distorting the shape/shadow. CSS在不扭曲形状/阴影的情况下向图形添加文本。 CSS
【发布时间】：2014-11-12 04:22:18
【问题描述】：

我一直在尝试将文本添加到这些球体的内部。在谷歌浏览器中，下方的阴影设置为悬停时出现。我不确定它是否适用于其他浏览器，但阴影的舞台区域意味着我无法添加文本。

Text A, Text B, Text c, Text D

是适当的名称。

如果有人可以提供帮助，那就太好了。

http://jsfiddle.net/fnjw92dt/

谢谢！

【问题讨论】：

标签： jquery html css css-shapes

【解决方案1】：

尝试在实际图形中添加一个段落，如下所示：

<div class="stage">
        <figure class="blueball" onclick="$('.main').moveTo(3);"><p>something here</p><span  class="shadow"></span></figure>    
</div>

然后你可以随心所欲地设计它：

figure{position:relative;}
figure p{position:absolute; top:60px; left:40px;}

example

【讨论】：