首页 > Web开发, 杂项资源 > CSS图形

CSS图形

2011年8月15日 发表评论 阅读评论 11,015 人阅读    

下面的示例展示了使用纯CSS制作的各种图形，你可以自由地修改文中的CSS代码。这个收集的原文在这里。

经测试，IE9, Chrome, FF, Safari都可以正常显示。

正方形

长方形

圆形

椭圆形

三角形（向上）

三角形（向下）

三角形（向左）

三角形（向右）

三角形（左上）

三角形（右上）

三角形（左下）

三角形（右下）

平行四边行

梯形

六角星形

五角星形 via Kit MacAllister

五边形

六边形
八边形

心形 via Nicolas Gallagher

无穷大 via Nicolas Gallagher

菱形

鸡蛋

吃豆人

说话泡泡

12星形 via Alan Johnson

8星形 via Alan Johnson

(全文完)

分类: Web开发, 杂项资源 标签: ,
好烂啊有点差凑合看看还不错很精彩 (9 人打了分，平均分： 5.00 )
Loading ... Loading ...
  1. 小白杨
    2011年8月15日08:29 | #1
    回复 | 引用

    有意思。

  2. 路人asdf
    2011年8月15日08:40 | #2
    回复 | 引用

    看上去很美，问题是天朝有多少浏览器能支持？

  3. peeekkk
    2011年8月15日08:40 | #3
    回复 | 引用

    厉害!
    不了解原理,好好研究下

  4. haha
    2011年8月15日09:00 | #4
    回复 | 引用

    @路人asdf
    天朝有游览器？

  5. Eson
    2011年8月15日09:15 | #5
    回复 | 引用

    厉害厉害！！

  6. Kunagisa
    2011年8月15日09:31 | #6
    回复 | 引用

    可惜我大天朝都是IE6

  7. 无缺
    2011年8月15日09:41 | #7
    回复 | 引用

    不理他群只用IE6的XX，强制升级！

  8. 代码回音
    2011年8月15日09:42 | #8
    回复 | 引用

    呵呵，那个心不错啊

  9. Radoy
    2011年8月15日09:49 | #9
    回复 | 引用

    非常给力！

  10. pw
    2011年8月15日09:50 | #10
    回复 | 引用

    @路人asdf Android/iPhone/iPad 全部支持

  11. Sutra
    2011年8月15日10:00 | #11
    回复 | 引用

    越到后面越给力嘛。

  12. Mic
    2011年8月15日10:31 | #12
    回复 | 引用

    何必呢 如果一个一个像素拼 什么画不出

  13. pktangyue
    2011年8月15日11:20 | #13
    回复 | 引用

    向上三角形，改成
    #triangle-up {
    width: 0;
    height: 0;
    border-left: 50px dashed transparent;
    border-right: 50px dashed transparent;
    border-bottom: 100px solid #f66;
    line-height:0;
    }
    可以兼容ie6

  14. 真名
    2011年8月15日11:35 | #14
    回复 | 引用

    Kunagisa :
    可惜我大天朝都是IE6

    你应该不是做网页设计的，IE6 其实也能画出这些图形，只是后来 w3c 的标准更硬气
    关键问题一直不是哪个浏览器能做什么，而是开发人员能不能用一样的代码来完成一致的效果，目前来说还是不行

  15. xiaozei
    2011年8月15日13:08 | #15
    回复 | 引用

    @Kunagisa 我是 ie8.0 ,chrome15.0,ff5.0.

  16. 小木刀
    2011年8月15日13:15 | #16
    回复 | 引用

    真名 :

    Kunagisa :
    可惜我大天朝都是IE6

    你应该不是做网页设计的，IE6 其实也能画出这些图形，只是后来 w3c 的标准更硬气
    关键问题一直不是哪个浏览器能做什么，而是开发人员能不能用一样的代码来完成一致的效果，目前来说还是不行

    现在设计师的难题就是，同样的代码在不同的浏览器里效果不一样吧。很纠结人啊。

  17. 郁江丫头
    2011年8月15日13:56 | #17
    回复 | 引用

    效果很炫，就可惜的是支持率不怎么好^_^

  18. 布拉德比特
    2011年8月15日15:48 | #18
    回复 | 引用

    厉害

  19. eson
    2011年8月15日18:05 | #19
    回复 | 引用

    @郁江丫头
    试过还不错了

  20. eson
    2011年8月15日18:06 | #20
    回复 | 引用

    @on
    si

  21. eson
    2011年8月15日18:06 | #21
    回复 | 引用

    oo

  22. rink1969
    2011年8月15日21:49 | #22
    回复 | 引用

    win7+IE9
    圆形椭圆菱形什么的都是方的……

  23. bbl
    2011年8月15日22:03 | #23
    回复 | 引用

    好犀利啊，不过ie9里面好像有点问题。

  24. 小何
    2011年8月18日09:24 | #24
    回复 | 引用

    标题，用css3做标题，可能更准确，呵呵

  25. 55
    2011年8月19日17:20 | #25
    回复 | 引用

    太给力了，当图片用，哇咔咔

  26. weyoung
    2011年8月20日10:33 | #26
    回复 | 引用

    这个很有意思啊

  27. 可乐加糖
    2011年8月22日08:36 | #27
    回复 | 引用

    哇，神棍帖啊！！！！立马用IE测试一下看看。

  28. 地狱星星
    2011年8月23日15:13 | #28
    回复 | 引用

    ie9 好多都显示不出来

  29. 海玉
    2011年8月29日11:37 | #29
    回复 | 引用

    很有意思。

  30. C瓜哥
    2011年9月6日14:40 | #30
    回复 | 引用

    IE6下面，大多是悲剧

  31. abcd
    2011年9月20日17:06 | #31
    回复 | 引用

    蛋疼，CSS不应该这么滥用。

  32. Jimmy
    2012年2月18日00:21 | #32
    回复 | 引用

    用Chrome16看的文章。
    用IE8测试有问题，连CODE都不能显示！

  33. ju
    2012年2月18日19:42 | #33
    回复 | 引用

    Why is there a ?
    It makes an IE 9 display the IE 7 standards mode, and I used F12 to switch to IE 9 mode.

  34. ju
    2012年2月18日19:43 | #34
    回复 | 引用

    地狱星星 :
    ie9 好多都显示不出来

    You see the F12. The document mode is IE7 standards, right?

  35. ju
    2012年2月18日23:59 | #35
    回复 | 引用

    ju :Why is there a ?It makes an IE 9 display the IE 7 standards mode, and I used F12 to switch to IE 9 mode.

    I meant <meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ />

  36. wen0301
    2012年4月6日15:41 | #36
    回复 | 引用

    跟着写了一遍，好累呀~~ 而且，真变态！！哈哈

  1. 2012年3月24日21:57 | #1
    神奇的CSS形状 | 酷壳 – CoolShell.cn
  2. 2012年3月24日23:09 | #2
    神奇的CSS形状 | Jaring's blog

无觅相关文章插件，快速提升流量