对齐CSS3伪：形状之前与列表图像
我正在尝试将 css 形状与列表图标对齐。
现在它看起来像这样：
但它应该看起来像：
我尝试使用position:absolute;相对的;和保证金，仍然一无所获。这是一个实时测试：
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);
}
如何将它们对齐在一起？或者将图像作为角是更好的选择？
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:
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?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您需要在
li上使用position:relative，然后在“箭头”上使用position:absolute（li:before ）。然后，您可以使用
top/left和负数margin-top的组合来精确定位箭头。参见： http://jsfiddle.net/fzSrL/2/
这个技术解释如下：http://css-tricks.com/absolute-positioning-inside-relative-positioning/
You need to use
position: relativeon thelis, and thenposition: absoluteon the "arrows" (li:before).You can then precisely position the arrows with a combination of
top/leftand a negativemargin-top.See: http://jsfiddle.net/fzSrL/2/
This technique is explained here: http://css-tricks.com/absolute-positioning-inside-relative-positioning/