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

Question

我正在尝试将css形状与列表图标对齐。

现在它看起来像这样：

但它应该看起来像：

我尝试使用position：absolute;相对的;和保证金，仍然没有。这是一个现场测试：

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

您需要在position: relative上使用li，然后在＆＃34;箭头＆＃34;上使用position: absolute。 （li:before）。

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

请参阅： http://jsfiddle.net/fzSrL/2/

此处解释了此技术：http://css-tricks.com/absolute-positioning-inside-relative-positioning/