标签：
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>
效果展示
标签：
原文地址：http://www.cnblogs.com/weilantiankong/p/4684309.html
