CSS三角形被切断了

Question

我正在尝试创建一些CSS三角形,使用css和:after伪类.不知何故,向上和向下箭头正常工作,但左右箭头被"切断"(见小提琴:http://jsfiddle.net/K9vxN/)

这基本上就是我正在使用的CSS:

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

有谁知道为什么会这样？

Answer 1

制作:after伪元素inline-block(或block).目前它是一个内联元素,它的大小基于它包含的(空)文本的行高.

但是,你必须确定一些定位,但这应该是微不足道的.

http://jsfiddle.net/K9vxN/2/

顺便说一句,你可能不需要使用:after所有,而是取决于你是否希望div来有一个箭头,或者是一个箭头.随你(由你决定.;)