带有完整背景图像的 CSS 语音气泡

【问题标题】：CSS speech bubble with full background image带有完整背景图像的 CSS 语音气泡
【发布时间】：2013-05-15 17:58:48
【问题描述】：

我知道在元素底部简单地添加一个小三角形很容易，但我希望背景图像延伸到三角形中。我怎样才能做到这一点？

【问题讨论】：

他知道如何制作语音气泡并添加三角形，但他也希望箭头具有用于语音气泡的背景图像
@Mr.Alien 您可以通过添加圆角和额外元素或伪元素来制作三角形，使元素看起来像对话泡泡，但我需要泡泡的背景图像延伸到三角形。
@Bobe 代码/演示在哪里？
如果你正在通过纯 css（无图像）做语音气泡this is pretty good site
这是一个相关问题stackoverflow.com/questions/23758922/…

【解决方案1】：

这里我昨天刚刚回答了这样的问题：Creating a transparent arrow above image in CSS3

但是对于底部的三角形，你会做这样的事情：

.image {
    position:relative;
    height:200px;
    width:340px;
    background:orange;
}
.image:before, .image:after {
    content:'';
    position:absolute;
    height:0;
    border-bottom:20px solid white;
    bottom:0;
}
.image:before {
    left:0;
    width:20px;
    border-right:16px solid transparent;
}
.image:after {
    left:36px;
    right:0;
    border-left:16px solid transparent;
}

还有一个DEMO

对于更高级的内容，您还可以使用masking 和clip-path。

【讨论】：