麻烦制作像div一样的三角形的顶部

Question

在Facebook上，如果你将鼠标悬停在有很多喜欢的东西上，就会弹出一个显示喜欢帖子的人。我想知道是否有人可以模仿css中的div并解释我是如何做到的。下面有一张图片显示了我的意思。我知道你必须使用a：在css之后但我不确定如何定位三角形以及所有这些。

以下是我在其他地方找到的一些代码：

#pointed {
position: relative;
margin: 0 auto;
width: 200px;
height: 200px;
background-color: white;
}

#pointed:after,
#pointed::after {
position: absolute;
top: 100%;
left: 50%;
margin-left: -50%;
content: '';
width: 0;
height: 0;
border-top: solid 150px red;
border-left: solid 100px transparent;
border-right: solid 100px transparent;
}

Answer 1

你粘贴的代码有它的要点。您可以看到working JSFiddle here，使其更像您的目标。

我认为这个问题有两个部分。第一部分是制作三角形。第二部分是定位三角形。

制作三角形

伪元素的边界是我们看到的那个三角形的原因。如果您不确定这是怎么回事，请考虑this great answer，我认为这很好地解释了它。

定位三角形

定位的关键是让孩子出现在父母之外。我们可以通过在孩子身上设置absolute定位来做到这一点。但是，如果我们在不更改父项的情况下执行此操作，则会相对于窗口设置absolute定位。

我们想要的是将孩子相对于父母定位。我们可以通过将父元素的定位设置为static以外的任何值来实现，这是默认值。在您粘贴的代码中，您可以看到他们将其设置为relative。有关定位的更多信息，我认为working docs非常具有说明性。另一个很好的资源可以在CSS Tricks上找到。

无论如何，我们希望我们的孩子在父母之外 。因此，如果我们有一个5px高的三角形，孩子用于定位的CSS应该类似于：

position: absolute;
top: -5px;

这会使它看起来像它附在顶部，正如你在上面的JSFiddle中看到的那样。

在您按照您希望的方式垂直放置它之后，设置其left定位，使其沿水平方向移动到您想要的位置。

当然，你必须问自己是否值得重新发明轮子 - 工具提示Bootstrap Jquery。