CSS边框是如何创建三角形的？答案

【问题标题】：How is it that CSS borders create a triangle?CSS边框是如何创建三角形的？
【发布时间】：2012-10-01 16:30:31
【问题描述】：

我很想知道流行的 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: "" 的作用感到困惑。

【问题讨论】：

请学习正确格式化问题。另外，如果您不费心使用正确的英语，为什么有人会费心回答您的问题？
您不使用 HTML 标记...请参阅此参考：Markdown Editing Help
经过多次修改，这个问题终于好了

标签： css

【解决方案1】：

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

首先，让我先解释一下content:"";的用途。你看，我们在这里使用的是一个叫做pseudo element的东西。这些旨在将content 添加到您的页面，例如文字或图像。三角形（或箭头）的情况是一种黑客行为，因为我们实际上不想向页面添加任何新内容；相反，我们只是想为元素绘制一个边框（是的，最终会给我们一个三角形）。但是，伪元素的content 不仅仅指定它包含的内容。它也是acts as the boolean to determine whether or not to display the element at all。换句话说，如果没有内容，这个东西就不会渲染。对我们来说幸运的是，只需传递一个空字符串就足以使其显示。

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

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

【讨论】：

感谢您的详细解释
IE7 不支持 :before 和 :after 伪元素。您不能仅使用 CSS 使其工作。您可以查看 IE7 是否显示三角形 unicode 字符▲，并使用这些字符，或者您可以use this solution。

【解决方案2】：

首先，让我们重新安排一下您的示例，并删除任何与您的问题无关的 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 粗线，你最终得到的是一个箭头，在这种情况下向上。

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

【讨论】：