html - 对齐 CSS3 伪 :before 形状与列表图像

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在lis 上使用，然后position: absolute在“箭头”( li:before) 上使用。

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

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

这种技术在这里解释：http: //css-tricks.com/absolute-positioning-inside-relative-positioning/