aligning CSS3 pseudo :before shape with list image

Question

I'm trying to align a css shape with the list icon.

Right now it looks like this:

But It should look like:

I tried using position: absolute; relative; and margin, still nothing. Heres a live test:

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);
}

How can I align them together? Or would images as corners be a better option?

Answer 1

You need to use position: relative on the lis, and then position: absolute on the "arrows" (li:before).

You can then precisely position the arrows with a combination of top/left and a negative margin-top.

See: http://jsfiddle.net/fzSrL/2/

This technique is explained here: http://css-tricks.com/absolute-positioning-inside-relative-positioning/