为什么我的标准CSS三角形会被截断？

Question

所以我有以下两个三角形：

这些点已被切断，但我的代码实际上就是这样：

.navCaret {
position: relative;
float: right;
right: 5px;
top: 5px;
width: 0; 
height: 0;
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-left: 9px solid #ccc;
}

.navCaretOL {
position: relative;
float: right;
right: 9px;
top: 9px;
width: 0; 
height: 0; 
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-left: 9px solid #333;
}

正如你可以看到in this JSFiddle,它在JSFiddle中渲染这些三角形时实际上没有关闭边缘。

总而言之，这不是创建纯CSS三角形的更标准方法，并且已经为我工作了很多次。任何人都知道可能导致这种奇怪行为的原因是什么？感谢。

编辑：顺便说一句，确认在IE和Chrome中的行为方式与最新版本相同。

Answer 1

当边框一直延伸到中心时，三角形只是尖头，这意味着改变内容框的任何内容都必须是0 - 这包括width/height和padding。检查覆盖height: 0;的其他css规则或添加一些填充。

.navCaret {
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 9px solid #ccc;
  outline: 1px solid red; /*for illustration purposes only*/
}

.navCaretOL {
  height: 0;
  width: 0;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 9px solid #333;
  white-space: nowrap;    /*for illustration purposes only*/
  outline: 1px solid red; /*for illustration purposes only*/
}

<div class="navCaret">height != 0</div>
<br>
<div class="navCaretOL">height == 0 (content is overflowing)</div>

Answer 2

OMG我只是通过浏览我的页面并逐行删除每个CSS规则来解决这个问题。显然这个问题是由以下规则引起的：

div.navUpper * {
    padding-top: 4px;
}

'。navUpper'是我的插入符号所在的容器。'*'选择器正在对它们应用4px填充 - 其效果可以在这里看到：https://jsfiddle.net/6f4yxp4e/8/

再次感谢那些回复的人 - 你们两种方式都是对的。