如何使用纯CSS在HTML元素顶部创建一个带有轮廓的三角形提示？

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

代码如下：

HTML:

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

---

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

您可以使用UTF-8“向上箭头”和一点绝对定位和文本阴影来实现这一点：

您的容器：

.boxArrow {
    margin-top:30px;
    height:100px;
    width:100px;    
    border:1px solid #000000;
    position:relative;
}

箭头：

.boxArrow:before {
    content: "\25B2";
    font-size:16px;
    color:#ffffff;
    position:absolute;
    top:-15px;
    left:30px;
    text-shadow: -1px 0 black, 0 1px white, 1px 0 black, 0 -1px black;
}

---

使用

：before

伪元素在第一个元素后面放置一个类似的箭头

这是在上使用的技术

---

不要使用边框来创建三角形。只需使用一个伪元素，对其应用CSS转换即可

结果:

HTML：

<ul class='drop-down'>
  <li><a href='#'>Suggestions</a></li>
  <li><a href='#'>Friends (8)</a></li>
  <li><a href='#'>Friend Requests</a></li>
  <li><a href='#'>My Requests</a></li>
  <li><a href='#'>People I blocked</a></li>
</ul>

.drop-down {
  position: relative;
  border: solid 1px #ccc;
  background: white;
}
.drop-down:before {
  position: absolute;
  top: -.56em; left: 1em;
  border-left: solid 1px #ccc;
  border-top: solid 1px #ccc;
  width: 1em; height: 1em;
  transform: rotate(45deg);
  background: inherit;
  content: '';
}

/* variations */
.drop-down:first-child:before {
  transform: rotate(60deg) skewX(30deg) scaleY(.866);
}
.drop-down:nth-child(3):before {
  border-right: solid 1px #ccc;
  border-left: none;
  transform: rotate(-60deg) skewY(30deg) scaleX(.866);
}

---

为了简单、方便和快速，您可以使用jQuery UI:

您不能向边框添加大纲。

content:'\u25bc；'，在大多数网页字体中哪一个是向下的实心箭头？那么怎么做呢@BenMBox阴影适用于长方体，而不是边框。不过我已经试过了@PatrickJamesMcDougleA到目前为止，已经出现了各种各样的解决方案：CSS边框三角形、unicode向上箭头，以及应用CSS3 2D变换来旋转带有两个边框的正方形。哇，我以前从来没有听说过这些“\25B2”类型的东西。谢谢！还有“左箭头”、“右箭头”和“下箭头”的代码吗？这似乎是一个比CSS边框三角形和unicode向上箭头更优雅的解决方案（只要不需要支持IE8或更早版本）。从我观察到的情况来看，它也呈现出最好的效果（就抗锯齿而言）。它只需要一个pseudeo元素（如有必要，释放一个用于其他目的）。
.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;
}

<ul class='drop-down'>
  <li><a href='#'>Suggestions</a></li>
  <li><a href='#'>Friends (8)</a></li>
  <li><a href='#'>Friend Requests</a></li>
  <li><a href='#'>My Requests</a></li>
  <li><a href='#'>People I blocked</a></li>
</ul>

.drop-down {
  position: relative;
  border: solid 1px #ccc;
  background: white;
}
.drop-down:before {
  position: absolute;
  top: -.56em; left: 1em;
  border-left: solid 1px #ccc;
  border-top: solid 1px #ccc;
  width: 1em; height: 1em;
  transform: rotate(45deg);
  background: inherit;
  content: '';
}

/* variations */
.drop-down:first-child:before {
  transform: rotate(60deg) skewX(30deg) scaleY(.866);
}
.drop-down:nth-child(3):before {
  border-right: solid 1px #ccc;
  border-left: none;
  transform: rotate(-60deg) skewY(30deg) scaleX(.866);
}