Html 带盒影的CSS语音气泡

创建使用CSS向左绘制三角形的DIV。尝试对父元素和伪元素（参见图片）以及代码应用统一的框阴影

这可能吗？还是我最好用边界图像来做这个

（顶部：阴影前，中间：CSS框阴影，底部：所需结果）

---

我知道这有点棘手，但对我来说似乎很好。 这是小提琴

HTML

---

不必使用

框影

，只需对buble使用

边框

。

不必使用三角形hack，只需使用

变换

旋转div，即可获得真实的

框影

。由于您只希望阴影位于div的一侧（可见的三角形一侧），因此必须使

模糊

更小，并降低

不透明度

演示：

HTML:

CSS:

.bubble{
背景色：#F2F2；
边界半径：5px；
盒影：0px 0px 6px#B2B2B2；
高度：200px；
利润率：20px；
宽度：275px；
}
泡泡之后{
背景色：#F2F2；
盒影：-2PX2PX0RGBA（178178178178.4）；
内容：“\00a0”；
显示：块；
高度：20px；
左：-10px；
位置：相对位置；
顶部：20px；
变换：旋转（45度）；
-moz变换：旋转（45度）；
-ms变换：旋转（45度）；
-o变换：旋转（45度）；
-webkit变换：旋转（45度）；
宽度：20px；
}

输出：

---

不要使用

框阴影

 height: 200px;
    width:  275px;
    float:right;
    margin-top: 41px;
    margin-left:11px;
    background-color: #f2f2f2;
    -webkit-border-radius: 5px;
    -webkit-box-shadow: 0px 0px 5px #b2b2b2;
    position:relative;
    z-index:1;

这是一个完整的CSS，带有 鼻子大小阴影宽度和可选边框的变量

诀窍是获得正确的偏移和变换以实现像素完美，并根据需要使用

溢出：隐藏
来切割气泡的鼻子（特别是如果需要边框）

上面答案中的例子不适用于我们，因为阴影会被裁剪并覆盖在主气泡区域上

在IE7/8中优雅地退化

HTML:

另一种解决方案是使用
过滤器：放置阴影（0.1px2pRGBA（0,0,0,5））它仅在对象形状周围放置阴影
 @LordVarlin我最近将其用于iPhone的后退按钮，因此我不必使用图像。为了获得更多乐趣，您可以使用
transform:skew（）
更改三角形的角度。我用Firefox 14查看了小提琴，它显示了一个矩形而不是三角形。为什么呢？FF14支持转换CSS，对吗？我必须为rotate添加所有供应商前缀，才能在所有浏览器中使用。将此添加到气泡：CSS:-webkit变换后：旋转（45度）-moz变换：旋转（45度）-o变换：旋转（45度）-ms变换：旋转（45度）；变换：旋转（45度）@jetlej在演示链接中。我将修改答案。谢谢但使用剪辑路径也可以创建更多。我已经修改了你的小提琴，创建了一个这样的例子。更多想法如下：
<div class="bubble">
    <div class="triangle"></div>
    <div class="border"></div>
    <div class="content">some content</div>
</div>

.bubble
{
    height: 200px;
    width:  275px;
    float:right;
    margin-top: 41px;
    margin-left:11px;
    background-color: #f2f2f2;
    -webkit-border-radius: 5px;
    -webkit-box-shadow: 0px 0px 5px #b2b2b2;
    position:relative;
    z-index:1;
}

.triangle
{
   position:absolute;
   top:12px;
   width: 0;
   height: 0;
   border-top: 15px solid transparent;
   border-bottom: 15px solid transparent;
   border-right: 10px solid #f2f2f2;
   margin-left:-9px;
   z-index:3;
}
.border
{        
   position:absolute;
   top:12px;
   width: 0;
   height: 0;
   border-top: 15px solid transparent;
   border-bottom: 15px solid transparent;
   border-right: 10px solid #e0e0e0;
   margin-left:-10px;
   z-index:2;
}

.content{
   padding:10px;
}

 height: 200px;
    width:  275px;
    float:right;
    margin-top: 41px;
    margin-left:11px;
    background-color: #f2f2f2;
    -webkit-border-radius: 5px;
    -webkit-box-shadow: 0px 0px 5px #b2b2b2;
    position:relative;
    z-index:1;

<div class="chat">
    <div class="bubble">
        <span class='tail'>&nbsp;</span>
        <p>The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children.</p><p>And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee.</p>
    </div>
</div>

$shadow_radius = 6px;
$nose_size = 12px;
$shadow = 0 1px $shadow_radius #B2B2B2;
$border =  1px solid #bbb

.chat {
    font-family:      sans-serif;
    font-size:        small;
}

.bubble {
    background-color: #F2F2F2;
    border-radius:    5px;
    border:           $border;
    box-shadow:       $shadow;
    display:          inline-block;
    padding:          10px 18px;
    margin-left:     ($shadow_radius + $nose_size);
    margin-right:    ($shadow_radius + $nose_size);
    position:         relative;
    vertical-align:   top;
}

.tail {
    position: absolute;
    top:      $nose_size;
    left:   -($shadow_radius + $nose_size);
    height:  ($shadow_radius + $nose_size);
    width:   ($shadow_radius + $nose_size);
    overflow: hidden;
}
.tail:before {
    border:            $border;
    background-color:  #F2F2F2;
    box-shadow:        $shadow;
    content:           "\00a0";

    display:           block;
    position:          absolute;
    top:               0px;
    left:              $nose_size;
    height:            $nose_size;
    width:             $nose_size;
    -webkit-transform: skew( -45deg );
    -moz-transform:    skew( -45deg );
}