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）。目前它是一个内联元素，它的大小基于它包含的（空）文本的行高。

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

div { height:0px; }
div:after { content:""; display: block;}

.arrow-up:after {
  margin-left: 50px; /* move right, to show it */
	width: 0; 
	height: 0; 
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	
	border-bottom: 15px solid black;
}

.arrow-down:after  {
	width: 0; 
	height: 0; 
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	
	border-top: 20px solid #f00;
}

.arrow-right:after {
	width: 0; 
	height: 0; 
	border-top: 60px solid transparent;
	border-bottom: 60px solid transparent;
	
	border-left: 60px solid green;
}

.arrow-left:after {
	width: 0; 
	height: 0; 
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent; 
	
	border-right:10px solid blue; 
}

<div class="arrow-up"></div>
<div class="arrow-down"></div>
<div class="arrow-left"></div>
<div class="arrow-right"></div>

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

顺便说一下，你可能根本不需要使用:after，但这取决于你是否希望div有箭头或箭头。随你（由你决定。 ;）

Answer 2

只需将display: block添加到您所有的:after选择器中。例如

.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;
}

Here's a demo

Answer 3

确保：after伪元素被指定为block或inline-block，具体取决于您的使用场景。

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

见http://jsfiddle.net/kFa6a/

Answer 4

你的伪元素需要触发布局：你可以设置为display:block;或任何其他显示值但是内联。您也可以使用float或position:absolute / fixed来触发布局。 http://jsfiddle.net/K9vxN/5/

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 */
}