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

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:"";.你看,我们在这里使用的是一个叫做伪元素的东西.这些内容旨在添加content到您的页面,如文字或图片.三角形(或箭头)的情况很糟糕,因为我们实际上并不想在页面中添加任何新内容; 相反,我们只想为元素绘制一个边框(是的,最终会给我们一个三角形).但是,伪元素content不仅仅指定它包含的内容.它还充当布尔值来确定是否显示元素.换句话说,如果没有内容,那么事物就不会呈现.幸运的是,只需传递一个空字符串就足以让它显示出来.

好的,现在关于那个讨厌的边界.它是如何制造三角形的？简而言之,我们正在做的是在元素的单个边上绘制边框,然后定位元素,使得我们只看到看起来像三角形的东西.

在这里,让我告诉你.看看这个JSFiddle.这不是太平凡的事情.它只是一个只显示底部边框的div.但是,如果你盯着并思考它,想象一下隐藏大部分边界,这样剩下的就是三角形.如果除了其中一条边之外你都删除了所有边,我们就会留下一个非常小的三角形.你能看见它吗？