html - 如何使用 CSS 制作有角度的工具提示指针元素？

Question

我想知道如何制作一个作为箭头的有角度的元素，附加到工具提示。我已经看到 Google Accounts 完成了这项工作，并附上了屏幕截图。看来他们正在通过几个span元素实现这一目标。

我无法从他们的 HTML/CSS 中弄清楚他们是如何做到的……我唯一的想法是在常规 div 或图像上使用 CSS3 旋转，但我猜有一种更基本的方法。

谁能给我一个提示？我不是在寻找一个完整的解决方案，我只是对如何处理它感到困惑。此外，它不是关于工具提示本身，而是关于那个有角度的元素。

编辑：这是一个相关的问题。他们使用透明边框、边框半径和盒子阴影？

Answer 1

您可以使用图像或操纵跨度创建它，我知道 Facebook 使用精灵图像创建它，谷歌和推特使用样式跨度创建它，只需使边框透明，底部除外。这是推特：

这是一个教程。