-2

我很想知道流行的 CSS 三角形是如何仅使用边框制作的。下面是代码示例：

#CLASS or ID name  #CLASS or ID name:after {
  border-color: transparent transparent #F3F3F3;
  border-style: solid; 
  border-width: 6px;  
  bottom: 0;  
  content: ""; 
  height: 0;
  left: 50%; 
  margin-bottom: -1px;
  margin-left: -6px; 
  margin-top: 0;
  position: absolute;
  width: 0;
}

同样，这究竟是如何产生向上箭头的？此外，我对做什么感到困惑content: ""。

4

2 回答 2

8

user1637741，你问了一个很好的问题。

首先，让我先解释content:"";. 你看，我们在这里使用的是一个叫做伪元素。这些旨在添加content到您的页面，例如文字或图像。三角形（或箭头）的情况是一种黑客行为，因为我们实际上不想向页面添加任何新内容；相反，我们只是想为元素绘制一个边框（是的，最终会给我们一个三角形）。然而，伪元素content不仅仅指定它包含的内容。它还充当布尔值来确定是否显示元素。换句话说，如果没有内容，这个东西就不会渲染。对我们来说幸运的是，简单地传递一个空字符串就足以让它显示出来。

好的，现在关于那个讨厌的边界。它到底是如何形成三角形的？简而言之，我们所做的是在元素的单个边缘上绘制边框，然后定位元素，使我们只能看到看起来是三角形的东西。

在这里，让我告诉你。看看这个 JSFiddle。这并没有什么太不寻常的事情。它只是一个仅显示底部边框的 div。但是，如果你盯着它想一想，想象一下隐藏大部分边界，剩下的就是一个三角形。如果你把它除了一个边缘之外的所有东西都去掉了，我们就会剩下一个很小的三角形。你能看见它吗？

于 2012-10-11T05:08:49.830 回答
1

首先，让我们重新安排一下您的示例，并删除任何与您的问题无关的 css：

.my-div:after {
    content: ""; 
    border-style: solid; 
    border-width: 6px;  
    border-color: transparent transparent #F3F3F3;
}

这是在做什么：

  • content: ""在 .之后立即插入一些内容.my-div。由于在这种情况下它是一个空字符串，因此您现在基本上有一个没有内容的文本节点，因此宽度为 0px

  • 接下来，border-style: solid;将border-width: 6px用 6px 宽的边框包围空内容。由于内容没有宽度，因此您基本上得到了一个实心框，它是您的默认文本颜色的任何颜色

  • 最后，border-color: transparent transparent #F3F3F3;将重置四个边中的每一个的边框颜色。第一个transparent设置顶部边框清晰，第二个设置左右边框也清晰，#F3F3F3 设置底部边框为灰白色。所以现在你有一个全是边框的盒子，顶部和侧边是不可见的，只剩下底部边框。但是，由于每条边连接形成 45 度角（想想相框上的斜接），而不只是底部的 6px 粗线，你最终得到的是一个箭头，在这种情况下向上指。

原始示例中的其余规则只是定位规则。

于 2012-10-11T05:17:19.890 回答