CSS三角形被切断了

时间:2014-03-21 10:23:43

标签: css

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

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

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

有谁知道为什么会这样?

4 个答案:

答案 0 :(得分:11)

制作: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>
&#13;
&#13;
&#13;

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

顺便说一句,您可能根本不需要使用:after,但这取决于您是否希望div 拥有箭头或一支箭。这取决于你。 ;)

答案 1 :(得分:3)

只需将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

答案 2 :(得分:1)

确保:after伪元素指定为blockinline-block,具体取决于您的使用场景。

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

请参阅http://jsfiddle.net/kFa6a/

答案 3 :(得分:1)

你的伪元素需要触发布局: 您可以设置为display:block;或任何其他显示值但内联。 您也可以使用floatposition: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 */
}