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

This topic created in 4582 days ago, the information mentioned may be changed or developed.

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

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

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

图片如下：

网页原地址：

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

图片

网页

效果

14 replies • 1970-01-01 08:00:00 +08:00

raincious

Dec 5, 2013

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

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

raincious

Dec 5, 2013

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

qqwerr

Dec 5, 2013

用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