对齐CSS3伪：形状之前与列表图像

Question

我想对齐一个CSS形状与列表图标。

现在它看起来是这样的：

但它应该是这样的：

我尝试使用的位置是：绝对的;相对的;和保证金，仍然没有。继承人现场测试：

http://jsfiddle.net/fzSrL/

CSS：

.services-info ul {} 
.services-info ul li { 
    background: #fff; 
    margin: 40px 0; 
    padding: 10px; 
    height: 115px; 
    width: 263px; 
} 

.services-info ul li:before { 
    content: ""; 
    width: 0; 
    height: 0; 
    border-top: 50px solid transparent; 
    border-right: 100px solid red; 
    border-bottom: 50px solid transparent; 
} 

.services-info ul li:nth-of-type(1) { 
    list-style-image: url(../images/fb-icon.png); 
} 

.services-info ul li:nth-of-type(2) { 
    list-style-image: url(../images/twitter-icon.png); 
} 

.services-info ul li:nth-of-type(3) { 
    list-style-image: url(../images/yt-icon.png); 
} 

我怎样才能将它们对齐在一起？或者将图像作为角落是更好的选择？

Answer 1

您需要在li上使用position: relative，然后在“箭头”（li:before）上使用position: absolute。

然后，您可以用top/left和负margin-top的组合精确定位箭头。

参见：http://jsfiddle.net/fzSrL/2/

这种技术在此说明：http://css-tricks.com/absolute-positioning-inside-relative-positioning/