有做前端的v友吗。请问如何不用图片实现这种效果？

[linfox]

在客户在做企业站，客户要求实现类似如图的效果。

但是我发现图片中的那些图标，思维导图都不是不是图片的格式。

我右键去点击没有“下载图片选项”。
另外我把整个网页下载下来，图片包里也没有该张图片。
请问如何实现类似效果？？

图片如下：




网页原地址：

http://www.asiaqualityfocus.com/about-aqf
http://www.asiaqualityfocus.com/inspection-services

[raincious]

Icon最简单的应该是字体。圆角可以border-radius，尖角可以width:0px; height:0px; border: 0; border-left: 50px solid #eee;

楼主换上IE6就知道哪些是图片，那些是CSS布局了。

[raincious]

哦我错了，尖角可以width:0px; height:0px; border: 50px solid #fff; border-left: 50px solid #eee;。但是上面的尖角是不规则的（不是45度），这个我真不知道怎么做到。

[qqwerr]

用chrome右键一下不就出来了嘛。。

background-position: -5px -1654px;
background-image: url("/images/front/sprite-front.png");
background-repeat: no-repeat;
所以还是图片：
http://www.asiaqualityfocus.com/images/front/sprite-front.png

[haker]

楼上正解

[haker]

第二张图:http://www.asiaqualityfocus.com/images/front/service-flow/social.png

[lizheming]

ls两个正解..另外吐槽一下，谁说背景图右键的话会出现保存选项的...

[skydiver]

@lizheming 背景图就是没有保存选项啊，除非装插件

[Seita]

楼上全部正解。

[lizheming]

@skydiver 我就是这个意思，lz不是说没出现保存才认为不是图片的么..所以小小的吐槽了一下。

[chairuosen]

不用图的话，可以用svg

[66beta]

两个都是背景图，最原始的CSS

[linfox]

谢谢楼上的热心V友。原来是背景图。谢谢大家哦！

[zakokun]

你搞前端不用fireBug 吗？用fireBug看看马上就发现了

[LcaKen0day]

chrome F12