html - 如何使用纯 CSS 在 HTML 元素之上创建带轮廓的三 Angular 形提示？

Question

您可能已经在 Facebook、Google、Twitter 等网站上看到过这种带有三 Angular 形箭头的框。幸运的是，我也用纯 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; }

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

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

Answer 1

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

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

See it in action based on your example .

.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;
}