Question

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

Answer 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。但是，如果你盯着并思考它，想象一下隐藏大部分边界，这样剩下的就是三角形。如果除了其中一条边之外你都删除了所有边，我们就会留下一个非常小的三角形。你能看到吗？

Answer 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粗线，你最终得到的是一个箭头，在这种情况下向上。

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

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

2 个答案: