1

我试图在 CSS 中绘制一个小三角形（作为矩形聊天气泡的尾部）。我设法做到了，但后来我想在尾部和盒子上应用一个盒子阴影。所以，我有以下 CSS 用于尾部：

#bubble::after {
    content: "";
    display: block;
    position: absolute;
    bottom: -22px;
    left: 10px;
    border-width: 22px 0 0 20px;
    border-style: solid;
    border-color: #fff transparent;
    -webkit-box-shadow:  5px 5px 5px 0px rgba(0, 0, 0, .6);
    box-shadow:  5px 5px 5px 0px rgba(0, 0, 0, .6);
}

这使得这个（对不起; 由于变焦，背景有点模糊):

在 Chrome 中渲染的尾巴

注意 box-shadow 没有在气泡尾部的对角线部分渲染。

我想要达到的效果是：

在此处输入图像描述

这是 Photoshop 内部的截图，所以它看起来可能与浏览器端口视图的部分截图有点不同（阴影应该更大，我忘了在缩放路径后更新图层样式）。

我将如何实现这一目标？

谢谢！

PS：我对使用光栅图像或 SVG 的想法持开放态度，尽管如果我不需要，我更愿意。

4

2 回答 2

1

我认为您正在尝试做的与 SA 上的这篇文章有关：CSS 绘制箭头的 CSS 阴影

于 2012-07-23T15:42:13.817 回答
0

恐怕仅使用 CSS 是不可能的。box-shadow适用于元素的盒子，图像仍然是一个矩形:)

请参阅http://lineandpixel.com/blog/png-shadow以获取另一位沮丧的用户的文章。

您必须硬着头皮使用光栅图像或 SVG。

于 2012-07-23T14:20:51.283 回答