寻找使用伪元素来创建一个三角形

Question

我最近看到克里斯Coyiers谈论伪元素，并期待着尝试做同样的事情。

我希望得到一个箭头指向的就对了

此内容的效果是我想要的目标

.overviews-list > li.active > ul.submenu > li.active 

李的位置，您可以从的jsfiddle见我要去的风格。我认为需要改变的CSS位于CSS的顶部。

http://jsfiddle.net/T2HuD/1/

Answer 1

这将设置定位和创建一个向下的箭头。这些数字是自定义的，可以调整以改变箭头的大小及其位置。

.overviews-list > li.active > ul.submenu > li.active { 
position:relative; 
} 

.overviews-list > li.active > ul.submenu > li.active:after { 
position:absolute; 
content:""; 
width:0px; 
height:0px; 
border-top: 15px solid white; 
border-right: 15px solid transparent; 
border-bottom: 15px solid transparent; 
border-left: 15px solid transparent; 
top:25%; 
right:10px; 

} 

JS Fiddle

Answer 2

我做别的东西，但它应该为你工作太...

.pdfLink:before { 
content:"\25BA"; 
color:#FF0000; 
font-family: Arial,Helvetica,sans-serif; 

}

我已经试过所有的工作守则。我不记得我是如何看待这种格式的char代码的，但是如果你看看这个char description，格式就很明显了。