制作各种纯css3风格属性的图形图标

顺晟科技
2022-09-13 13:53:31
230
  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>
效果展示
上一篇：CSS3生成图标图标下一篇：[转]27个令人惊奇的纯CSS3图标
网站建设

Css

制作各种纯css3风格属性的图形图标
