CSS 三 Angular 形被切断

Question

我正在尝试使用 css 和 :after 伪类创建一些 CSS 三 Angular 形。不知何故，向上和向下箭头工作正常，但向左和向右箭头被“切断”(参见 fiddle :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 有箭头还是 成为一个箭头。随你(由你决定。 ;)