aligning CSS3 pseudo :before shape with list image
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-b开发者_开发技巧ottom: 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?
You need to use position: relative
on the li
s, 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/
精彩评论