如何使用纯 CSS 在 HTML 元素顶部创建带有轮廓的三角形尖端？

Question

您可能在 Facebook、Google、Twitter 等网站上看到过这种带有三角形箭头的盒子。幸运的是，我也用纯 CSS 创建了一个盒子。

这是代码：

HTML :

<div class="box"><h3>This box contains a triangular arrow tip on top of it.</h3></div>

CSS :

.box { position: relative; background: #fff; color: #000; padding: 8px; border: 1px solid #ccc; }

.box:after {content: ""; position: absolute; display: block; width: 0; top: -15px; right: auto; bottom: auto; left: 5px; border-width: 0 10px 15px; border-style: solid; border-color: #fff transparent; }

您可以看到三角形尖端是纯白色的。如果您研究 CSS，您会发现尖端的白色实际上是边框的颜色。

现在我正在寻找的是三角形尖端表面上的（例如灰色）边框或轮廓。因为提示的颜色来自边框，所以我不能使用第二个边框，因为没有这样的东西。我试过大纲，但它似乎不起作用。任何帮助如何使用纯 CSS 做到这一点？

Answer 1

利用:before伪元素在第一个后面放置一个类似的箭头。

这是http://cssarrowplease.com 上使用的技术。

根据您的示例查看它的实际应用。

.box:before {
    content:"";
    position: absolute;
    display: block;
    width: 0;
    top: -16px;
    right: auto;
    bottom: auto;
    left: 3px;
    border-width: 0 12px 17px;
    border-style: solid;
    border-color: #ccc transparent;
    z-index: -1;
}