我有一个div,我希望它看起来像一个带有盒阴影的气泡。目前它看起来是这样的:
问题是我无法弄清楚如何在伪元素“tail”上添加阴影。这可能吗?如果我在伪元素上添加box-shadow,则会出现以下情况,这显然不是我想要的:
我真的很感激任何关于此的指导。谢谢 JS Fiddle 代码:
问题是我无法弄清楚如何在伪元素“tail”上添加阴影。这可能吗?如果我在伪元素上添加box-shadow,则会出现以下情况,这显然不是我想要的:
我真的很感激任何关于此的指导。谢谢 JS Fiddle 代码:
#container {
height: 500px;
background-color: #Febb68;
padding: 30px;
}
#bubble {
height: 200px;
width: 200px;
padding: 50px 60px 0;
position: relative;
z-index: 10;
border-radius: 30px 0;
background: rgba(255, 255, 255, .85);
box-shadow: 0 0 10px 1px #944;
margin-bottom: 55px;
}
#bubble:after {
content: "";
position: absolute;
top: 100%;
left: 0;
width: 0;
height: 0;
border-top: 85px solid rgba(255, 255, 255, 0.85);
border-right: 85px solid transparent;
border-left: 0px solid transparent;
}
<div id='container'>
<div id='bubble'>
ABC
</div>
</div>
编辑:这个问题与CSS Speech Bubble with Box Shadow不同,因为这个问题中的背景是透明的(这不能改变,因为最终的背景是一个图像而不是一个实心颜色),并且指针只倾斜在一侧。以下是那个问题的解决方案,它具有透明的背景:http://jsfiddle.net/mek5Z/2140/