如何制作带有边框的纯 CSS 语音气泡？答案

【问题标题】：How can I make a CSS only speech bubble with a border?如何制作带有边框的纯 CSS 语音气泡？
【发布时间】：2011-08-10 01:03:34
【问题描述】：

我想制作一个纯 CSS 的语音气泡。到目前为止，我有这个...

示例

CSS

div {
    position: relative;
    background: #fff;
    padding: 10px;
    font-size: 12px;
    text-align: center;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

div:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    left: 50%;
    bottom: -60px;
    margin-left: -15px;
    border-width: 30px 20px 30px 20px;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
}

jsFiddle.

...这几乎正是我想要的。但是，我想要整个东西周围有一个浅色边框。

显然，在主要部分，这很简单，只需将border: 1px solid #333 添加到div。

但是，由于气泡的尾部是 border hack，因此我无法使用它的边框。

我尝试设置 0 0 1px #333 的框阴影，但浏览器将边框应用于元素的矩形形状（我猜这是他们应该做的）。

jsFiddle.

我接下来的想法是找到一个看起来像气泡尾巴的 Unicode 字符并将其绝对定位在那里，以 text-shadow 为边框并使用主气泡的 z-index 来隐藏文本的顶部阴影。

什么 Unicode 字符适合这个？我应该做一些不同的事情吗？我需要借助图像吗？

我只需要支持 Mobile Safari。 :)

【问题讨论】：

@samccone 当然可以，但不要忘记 :before 和 :after（考虑到我只针对支持伪元素的 Mobile Safari）。
@alex 这个边界黑客太酷了:)我做了一个变体：jsfiddle.net/vgk6p/1
@Šime Vidas 非常性感！干得好:)

标签： css mobile-safari

【解决方案1】：

<div>Hello Stack Overflow!<span></span></div>

div span:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    left: 50%;
    bottom: -51px;
    margin-left: -15px;
    border-width: 20px 20px 30px 20px;
    border-style: solid;
    border-color: #000 transparent transparent transparent;
}

http://jsfiddle.net/QYH5a/

【讨论】：

这只是在其后面放置相同的东西以使其看起来像边框吗？我没有想到...谢谢。 哈怎么了！ pwned！？
@alex 只是庆祝我在一个问题上的胜利......好吧，那太傲慢了......对不起......

【解决方案2】：

对于您建议的 Unicode 字符方法，最合适的是 ▼ U+25BC BLACK DOWN-POINTING TRIANGLE。我不知道iOS是否有字形。

【讨论】：

【解决方案3】：

这是一个类似的解决方案：

http://jsfiddle.net/JyPBD/2/

<div>Hello Stack Overflow!<span></span></div>

body {
   background: #ccc;   
}

div {
    position: relative;
    background: #fff;
    padding: 10px;
    font-size: 12px;
    text-align: center;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    border: 1px solid #333;
}
div:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    left: 50%;
    bottom: -60px;
    margin-left: -16px;
    border-width: 30px 20px 30px 20px;
    border-style: solid;
    border-color: green transparent transparent transparent;

}

div span
{
    border-color: #FF0000 transparent transparent;
    border-style: solid;
    border-width: 25px 15px;
    bottom: -51px;
    margin-left: -65px;

    position: absolute;
    z-index: 10;
}

【讨论】：

【解决方案4】：

您可以使用 filter 属性和 box-shadow() 来做到这一点...

-webkit-filter: drop-shadow(1px 1px 1px #111) drop-shadow(-1px -1px 1px #111);

jsFiddle.

【讨论】：