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

Question

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

Text A, Text B, Text c, Text D 

是否合适。

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

http://jsfiddle.net/fnjw92dt/

谢谢！

Answer 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