CSS图形

CSS图形

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

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

正方形

长方形

圆形

椭圆形

三角形(向上)

三角形(向下)

三角形(向左)

三角形(向右)

三角形(左上)

三角形(右上)

三角形(左下)

三角形(右下)

平行四边行

梯形

六角星形

五角星形 via Kit MacAllister

五边形

六边形
八边形

心形 via Nicolas Gallagher

无穷大 via Nicolas Gallagher

菱形

鸡蛋

吃豆人

说话泡泡

12星形 via Alan Johnson

8星形 via Alan Johnson

(全文完)


关注CoolShell微信公众账号可以在手机端搜索文章

(转载本站文章请注明作者和出处 酷 壳 – CoolShell ,请勿用于任何商业用途)

——=== 访问 酷壳404页面 寻找遗失儿童。 ===——
好烂啊有点差凑合看看还不错很精彩 (9 人打了分,平均分: 5.00 )
Loading...

CSS图形》的相关评论

  1. 向上三角形,改成
    #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

  2. Kunagisa :
    可惜我大天朝都是IE6

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

  3. 真名 :

    Kunagisa :
    可惜我大天朝都是IE6

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

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

  4. 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″ />

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*