1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>纯css3样式属性制作各种图形图标</title>
6 </head>
7 <style>
8
9 /*正方形*/
10 #square{width:100px;height:100px;background:red;}
11 /*长方形*/
12 #rectangle{width:200px;height:100px;background:red;}
13 /*圆*/
14 #circle{width:100px;height:100px;background:red;-moz-border-radius:50px;-webkit-border-radius:50px;border-radius:50px;}
15 /*椭圆*/
16 #oval{width:200px;height:100px;background:red;-moz-border-radius:100px / 50px;-webkit-border-radius:100px / 50px;border-radius:100px / 50px;}
17 /*三角形*/
18 #triangle-up{width:0;height:0;border-left:50px solid transparent;border-right:50px solid transparent;border-bottom:100px solid red;/*向上*/ }
19 #triangle-down{width:0;height:0;border-left:50px solid transparent;border-right:50px solid transparent;border-top:100px solid red;/*向下*/ }
20 #triangle-left{width:0;height:0;border-top:50px solid transparent;border-right:100px solid red;border-bottom:50px solid transparent;/*向左*/ }
21 #triangle-right{width:0;height:0;border-top:50px solid transparent;border-left:100px solid red;border-bottom:50px solid transparent;/*向右*/ }
22
23 /*平行四边形*/
24 #parallelogram{width:150px;height:100px;-webkit-transform:skew(20deg);-moz-transform:skew(20deg);-o-transform:skew(20deg);background:red;}
25 /*五边形*/
26 #pentagon{position:relative;width:54px;border-width:50px 18px 0;border-style:solid;border-color:red transparent;}
27 #pentagon:before{content:"";position:absolute;height:0;width:0;top:-85px;left:-18px;border-width:0 45px 35px;border-style:solid;border-color:transparent transparent red;}
28
29
30 /*五角星*/
31 #star-five{margin:50px 0;position:relative;display:block;color:red;width:0px;height:0px;border-right:100px solid transparent;border-bottom:70px solid red;border-left:100px solid transparent;-moz-transform:rotate(35deg);-webkit-transform:rotate(35deg);-ms-transform:rotate(35deg);-o-transform:rotate(35deg);}
32 #star-five:before{border-bottom:80px solid red;border-left:30px solid transparent;border-right:30px solid transparent;position:absolute;height:0;width:0;top:-45px;left:-65px;display:block;content:‘‘;-webkit-transform:rotate(-35deg);-moz-transform:rotate(-35deg);-ms-transform:rotate(-35deg);-o-transform:rotate(-35deg);}
33 #star-five:after{position:absolute;display:block;color:red;top:3px;left:-105px;width:0px;height:0px;border-right:100px solid transparent;border-bottom:70px solid red;border-left:100px solid transparent;-webkit-transform:rotate(-70deg);-moz-transform:rotate(-70deg);-ms-transform:rotate(-70deg);-o-transform:rotate(-70deg);content:‘‘;}
34
35 /*对话框*/
36 #talkbubble{width:120px;height:80px;background:red;position:relative;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;}
37 #talkbubble:before{content:"";position:absolute;right:100%;top:26px;width:0;height:0;border-top:13px solid transparent;border-right:26px solid red;border-bottom:13px solid transparent;}
38
39 /*八卦*/
40 #yin-yang{width:96px;height:48px;background:#eee;border-color:red;border-style:solid;border-width:2px 2px 50px 2px;border-radius:100%;position:relative;}
41 #yin-yang:before{content:"";position:absolute;top:50%;left:0;background:#eee;border:18px solid red;border-radius:100%;width:12px;height:12px;}
42 #yin-yang:after{content:"";position:absolute;top:50%;left:50%;background:red;border:18px solid #eee;border-radius:100%;width:12px;height:12px;}
43
44 /*Facebook*/
45 #facebook-icon{background:red;text-indent:-999em;width:100px;height:110px;border-radius:5px;position:relative;overflow:hidden;border:15px solid red;border-bottom:0;}
46 #facebook-icon::before{content:"/20";position:absolute;background:red;width:40px;height:90px;bottom:-30px;right:-37px;border:20px solid #eee;border-radius:25px;}
47 #facebook-icon::after{content:"/20";position:absolute;width:55px;top:50px;height:20px;background:#eee;right:5px;}
48
49
50 /*搜索符号*/
51 #magnifying-glass{font-size:10em;/* This controls the size. */ display:inline-block;width:0.4em;height:0.4em;border:0.1em solid red;position:relative;border-radius:0.35em;}
52 #magnifying-glass::before{content:"";display:inline-block;position:absolute;right:-0.25em;bottom:-0.1em;border-width:0;background:red;width:0.35em;height:0.08em;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);}
53
54 /*折叠型*/
55 #chevron{position:relative;text-align:center;padding:12px;margin-bottom:6px;height:60px;width:200px;}
56 #chevron:before{content:‘‘;position:absolute;top:0;left:0;height:100%;width:51%;background:red;-webkit-transform:skew(0deg, 6deg);-moz-transform:skew(0deg, 6deg);-ms-transform:skew(0deg, 6deg);-o-transform:skew(0deg, 6deg);transform:skew(0deg, 6deg);}
57 #chevron:after{content:‘‘;position:absolute;top:0;right:0;height:100%;width:50%;background:red;-webkit-transform:skew(0deg, -6deg);-moz-transform:skew(0deg, -6deg);-ms-transform:skew(0deg, -6deg);-o-transform:skew(0deg, -6deg);transform:skew(0deg, -6deg);}?
58
59 /*钻石*/
60 #cut-diamond{border-style:solid;border-color:transparent transparent red transparent;border-width:0 25px 25px 25px;height:0;width:50px;position:relative;margin:20px 0 50px 0;} #cut-diamond:after{content:"";position:absolute;top:25px;left:-25px;width:0;height:0;border-style:solid;border-color:red transparent transparent transparent;border-width:70px 50px 0 50px;}
61 /*鸡蛋*/
62 #egg{display:block;width:126px;height:180px;background-color:red;-webkit-border-radius:63px 63px 63px 63px / 108px 108px 72px 72px;border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;}
63 </style>
64 <body style=" width:600px; margin:auto;">
65 <h4>正方形</h4>
66 <div id="square"></div>
67
68
69 <h4>长方形</h4>
70 <div id="rectangle"></div>
71
72 <h4>圆</h4>
73 <div id="circle"></div>
74
75 <h4>椭圆</h4>
76 <div id="oval"></div>
77
78 <h4>三角形</h4>
79 <div id="triangle-up"></div>
80
81 <h4>平行四边形</h4>
82 <div id="parallelogram"></div>
83
84
85 <h4>五边形</h4>
86 <div id="pentagon"></div>
87
88 <h4>五角星</h4>
89 <div id="star-five"></div>
90
91 <h4>对话框</h4>
92 <div id="talkbubble"></div>
93
94 <h4>八卦</h4>
95 <div id="yin-yang"></div>
96
97 <h4>Facebook</h4>
98 <div id="facebook-icon"></div>
99
100 <h4>搜索符号</h4>
101 <div id="magnifying-glass"></div>
102
103 <h4>折叠型</h4>
104 <div id="chevron"></div>
105
106 <h4>钻石</h4>
107 <div id="cut-diamond"></div>
108
109 <h4>鸡蛋</h4>
110 <div id="egg"></div>
111
112 </body>
113 </html>
效果展示
时间： 2024-10-18 03:30:00