CSS三角形被截断

我正在尝试使用CSS和：after伪类创建一些CSS三角形。不知何故，上下箭头工作正常，但左箭头和右箭头被“切断”（参见fiddle:）

这基本上就是我正在使用的css：

.arrow-right:after {
    content:"";
    border-top: 60px solid transparent;
    border-bottom: 60px solid transparent;
    border-left: 60px solid green;
}

---

有人知道为什么会发生这种情况吗？

在

伪元素
内联块之后制作
（或
块
）。目前它是一个内联元素，它的大小取决于它所包含的（空）文本的行高

不过，您必须确定一些位置，但这应该是微不足道的


div{height:0px；}
div:在{content:：；display:block；}之后
.向上箭头：之后{
左边距：50px；/*向右移动以显示它*/
宽度：0；
身高：0；
左边框：15px实心透明；
右边框：15px实心透明；
边框底部：15px纯黑；
}
.向下箭头：之后{
宽度：0；
身高：0；
左边框：20px实心透明；
右边框：20px实心透明；
边框顶部：20px实心#f00；
}
.向右箭头：之后{
宽度：0；
身高：0；
边框顶部：60px实心透明；
边框底部：60px实心透明；
左边框：60px纯绿色；
}
.左箭头：之后{
宽度：0；
身高：0；
边框顶部：10px实心透明；
边框底部：10px实心透明；
右边框：10px纯蓝色；
}
确保：after伪元素指定为
块
或
内联块
，具体取决于您的使用场景

div:after {
    content:"";
    display: block;
}

请参见
只需将
显示：块
添加到所有
：选择器之后。比如说

.arrow-up:after {
    display: block; /* Added this */
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid black;
}

您的伪元素需要触发布局：
可以设置为
display:block或除内联外的任何其他显示值。
您也可以使用
浮动
或
位置：绝对
/
固定
来触发布局。

有必要在伪类之后使用吗？嗯，我正在尝试制作一个播放按钮，它由一个圆圈内的三角形组成。这将避免我必须使用额外的HTML，因为我可以使用div本身来创建圆，并为三角形创建after伪类。
div:after {
 content:"";
display:block;/* or table, inline-table,inline-block, but not inline*/
/* to your choice, where it suits design the best */
/* pick up here instead display*/
/*position:absolute;*//* or fixed */;
/* float:left;*//* or right */
}