使用纯CSS画多边形

在做网页过程中想到了需要使用扇形图形来完成一些功能，第一印象就是使用CSS来完成。

经过查资料发现了transform 的skew()正好合适且使用方便

例子代码：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>CSS 画扇形</title>
 6     <style type="text/css">
 7     .sector{
 8         height: 200px;
 9         width: 200px;
10         overflow:hidden;
11         transform-origin: 0 100%;
12         transform: skew(-50deg);
13         position: relative;
14         background: #cccccc;
15     }
16     .sector:before{
17         height:inherit;
18         width: inherit;
19         position: absolute;
20         content: "";
21         border-radius: 0 200px 0 0;
22         background: #fecb2f;
23         transform-origin: 0 100%;
24         transform: skew(50deg);
25     }
26     </style>
27 </head>
28 <body>
29 <div class="sector"></div>
30 </body>
31 </html>

1、正方形

 CSS代码如下：


#square { 
100px; 
height: 100px; 
background: red; 
} 

2、长方形

 CSS代码如下：

#rectangle { 
200px; 
height: 100px; 
background: red; 
} 

3、圆形

 

 CSS代码如下：

#circle { 
100px; 
height: 100px; 
background: red; 
-moz-border-radius: 50px; 
-webkit-border-radius: 50px; 
border-radius: 50px; 
} 

4、椭圆

 CSS代码如下：

#oval { 
200px; 
height: 100px; 
background: red; 
-moz-border-radius: 100px / 50px; 
-webkit-border-radius: 100px / 50px; 
border-radius: 100px / 50px; 
} 

5、上三角

CSS代码如下：

#triangle-up { 
0; 
height: 0; 
border-left: 50px solid transparent; 
border-right: 50px solid transparent; 
border-bottom: 100px solid red; 
} 

6、下三角

 CSS代码如下：

#triangle-down { 
0; 
height: 0; 
border-left: 50px solid transparent; 
border-right: 50px solid transparent; 
border-top: 100px solid red; 
} 

7、左三角

 CSS代码如下：


#triangle-left { 
0; 
height: 0; 
border-top: 50px solid transparent; 
border-right: 100px solid red; 
border-bottom: 50px solid transparent; 
} 

8、右三角

 CSS代码如下：

#triangle-right { 
0; 
height: 0; 
border-top: 50px solid transparent; 
border-left: 100px solid red; 
border-bottom: 50px solid transparent; 
} 

9、左上三角

 CSS代码如下：

#triangle-topleft { 
0; 
height: 0; 
border-top: 100px solid red; 
border-right: 100px solid transparent; 
} 

10、右上三角

 CSS代码如下：



#triangle-topright { 
0; 
height: 0; 
border-top: 100px solid red; 
border-left: 100px solid transparent; 
} 

11、左下三角

 

 CSS代码如下：

#triangle-bottomleft { 
0; 
height: 0; 
border-bottom: 100px solid red; 
border-right: 100px solid transparent; 
} 

12、右下三角

 CSS代码如下：



#triangle-bottomright { 
0; 
height: 0; 
border-bottom: 100px solid red; 
border-left: 100px solid transparent; 
} 

13、平行四边形

 CSS代码如下：


#parallelogram { 
150px; 
height: 100px; 
margin-left:20px; 
-webkit-transform: skew(20deg); 
-moz-transform: skew(20deg); 
-o-transform: skew(20deg); 
background: red; 
} 

14、梯形

 CSS代码如下：

#trapezoid { 
border-bottom: 100px solid red; 
border-left: 50px solid transparent; 
border-right: 50px solid transparent; 
height: 0; 
100px; 
} 

15、六角星

 CSS代码如下：

#star-six { 
0; 
height: 0; 
border-left: 50px solid transparent; 
border-right: 50px solid transparent; 
border-bottom: 100px solid red; 
position: relative; 
} 
#star-six:after { 
0; 
height: 0; 
border-left: 50px solid transparent; 
border-right: 50px solid transparent; 
border-top: 100px solid red; 
position: absolute; 
content: ""; 
top: 30px; 
left: -50px; 
} 

16、五角星

 CSS代码如下：

#star-five { 
margin: 50px 0; 
position: relative; 
display: block; 
color: red; 
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); 
} 
#star-five:before { 
border-bottom: 80px solid red; 
border-left: 30px solid transparent; 
border-right: 30px solid transparent; 
position: absolute; 
height: 0; 
0; 
top: -45px; 
left: -65px; 
display: block; 
content: ''; 
-webkit-transform: rotate(-35deg); 
-moz-transform: rotate(-35deg); 
-ms-transform: rotate(-35deg); 
-o-transform: rotate(-35deg); 
} 
#star-five:after { 
position: absolute; 
display: block; 
color: red; 
top: 3px; 
left: -105px; 
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: ''; 
} 

17、五角大楼

 

 CSS代码如下：


#pentagon { 
position: relative; 
54px; 
border- 50px 18px 0; 
border-style: solid; 
border-color: red transparent; 
} 
#pentagon:before { 
content: ""; 
position: absolute; 
height: 0; 
0; 
top: -85px; 
left: -18px; 
border- 0 45px 35px; 
border-style: solid; 
border-color: transparent transparent red; 
} 

18、六边形

 CSS代码如下：


#hexagon { 
100px; 
height: 55px; 
background: red; 
position: relative; 
} 
#hexagon:before { 
content: ""; 
position: absolute; 
top: -25px; 
left: 0; 
0; 
height: 0; 
border-left: 50px solid transparent; 
border-right: 50px solid transparent; 
border-bottom: 25px solid red; 
} 
#hexagon:after { 
content: ""; 
position: absolute; 
bottom: -25px; 
left: 0; 
0; 
height: 0; 
border-left: 50px solid transparent; 
border-right: 50px solid transparent; 
border-top: 25px solid red; 
} 

19、八角形

 CSS代码如下：


#octagon { 
100px; 
height: 100px; 
background: red; 
position: relative; 
} 
#octagon:before { 
content: ""; 
position: absolute; 
top: 0; 
left: 0; 
border-bottom: 29px solid red; 
border-left: 29px solid #eee; 
border-right: 29px solid #eee; 
42px; 
height: 0; 
} 
#octagon:after { 
content: ""; 
position: absolute; 
bottom: 0; 
left: 0; 
border-top: 29px solid red; 
border-left: 29px solid #eee; 
border-right: 29px solid #eee; 
42px; 
height: 0; 
} 

20、爱心

 CSS代码如下：


#heart { 
position: relative; 
100px; 
height: 90px; 
} 
#heart:before, 
#heart:after { 
position: absolute; 
content: ""; 
left: 50px; 
top: 0; 
50px; 
height: 80px; 
background: red; 
-moz-border-radius: 50px 50px 0 0; 
border-radius: 50px 50px 0 0; 
-webkit-transform: rotate(-45deg); 
-moz-transform: rotate(-45deg); 
-ms-transform: rotate(-45deg); 
-o-transform: rotate(-45deg); 
transform: rotate(-45deg); 
-webkit-transform-origin: 0 100%; 
-moz-transform-origin: 0 100%; 
-ms-transform-origin: 0 100%; 
-o-transform-origin: 0 100%; 
transform-origin: 0 100%; 
} 
#heart:after { 
left: 0; 
-webkit-transform: rotate(45deg); 
-moz-transform: rotate(45deg); 
-ms-transform: rotate(45deg); 
-o-transform: rotate(45deg); 
transform: rotate(45deg); 
-webkit-transform-origin: 100% 100%; 
-moz-transform-origin: 100% 100%; 
-ms-transform-origin: 100% 100%; 
-o-transform-origin: 100% 100%; 
transform-origin :100% 100%; 
} 

21、无穷大符号

 

CSS代码如下：


#infinity { 
position: relative; 
212px; 
height: 100px; 
} 
#infinity:before, 
#infinity:after { 
content: ""; 
position: absolute; 
top: 0; 
left: 0; 
60px; 
height: 60px; 
border: 20px solid red; 
-moz-border-radius: 50px 50px 0 50px; 
border-radius: 50px 50px 0 50px; 
-webkit-transform: rotate(-45deg); 
-moz-transform: rotate(-45deg); 
-ms-transform: rotate(-45deg); 
-o-transform: rotate(-45deg); 
transform: rotate(-45deg); 
} 
#infinity:after { 
left: auto; 
right: 0; 
-moz-border-radius: 50px 50px 50px 0; 
border-radius: 50px 50px 50px 0; 
-webkit-transform: rotate(45deg); 
-moz-transform: rotate(45deg); 
-ms-transform: rotate(45deg); 
-o-transform: rotate(45deg); 
transform: rotate(45deg); 
} 

22、鸡蛋

 CSS代码如下：

 

#egg { 
display:block; 
126px; 
height: 180px; 
 
-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px; 
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; 
} 

23、食逗人（Pac-Man）

 CSS代码如下：

 

#pacman { 
0px; 
height: 0px; 
border-right: 60px solid transparent; 
border-top: 60px solid red; 
border-left: 60px solid red; 
border-bottom: 60px solid red; 
border-top-left-radius: 60px; 
border-top-right-radius: 60px; 
border-bottom-left-radius: 60px; 
border-bottom-right-radius: 60px; 
} 

24、提示对话框

 CSS代码如下：



#talkbubble { 
120px; 
height: 80px; 
background: red; 
position: relative; 
-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
border-radius: 10px; 
} 
#talkbubble:before { 
content:""; 
position: absolute; 
right: 100%; 
top: 26px; 
0; 
height: 0; 
border-top: 13px solid transparent; 
border-right: 26px solid red; 
border-bottom: 13px solid transparent; 
} 

25、12角星

 CSS代码如下：


#burst-12 { 
background: red; 
80px; 
height: 80px; 
position: relative; 
text-align: center; 
} 
#burst-12:before, #burst-12:after { 
content: ""; 
position: absolute; 
top: 0; 
left: 0; 
height: 80px; 
80px; 
background: red; 
} 
#burst-12:before { 
-webkit-transform: rotate(30deg); 
-moz-transform: rotate(30deg); 
-ms-transform: rotate(30deg); 
-o-transform: rotate(30deg); 
transform: rotate(30deg); 
} 
#burst-12:after { 
-webkit-transform: rotate(60deg); 
-moz-transform: rotate(60deg); 
-ms-transform: rotate(60deg); 
-o-transform: rotate(60deg); 
transform: rotate(60deg); 
} 

26、8角星

 CSS代码如下：



#burst-8 { 
background: red; 
80px; 
height: 80px; 
position: relative; 
text-align: center; 
-webkit-transform: rotate(20deg); 
-moz-transform: rotate(20deg); 
-ms-transform: rotate(20deg); 
-o-transform: rotate(20eg); 
transform: rotate(20deg); 
} 
#burst-8:before { 
content: ""; 
position: absolute; 
top: 0; 
left: 0; 
height: 80px; 
80px; 
background: red; 
-webkit-transform: rotate(135deg); 
-moz-transform: rotate(135deg); 
-ms-transform: rotate(135deg); 
-o-transform: rotate(135deg); 
transform: rotate(135deg); 
} 

27、钻石

 CSS代码如下：



#cut-diamond { 
border-style: solid; 
border-color: transparent transparent red transparent; 
border- 0 25px 25px 25px; 
height: 0; 
50px; 
position: relative; 
margin: 20px 0 50px 0; 
} 
#cut-diamond:after { 
content: ""; 
position: absolute; 
top: 25px; 
left: -25px; 
0; 
height: 0; 
border-style: solid; 
border-color: red transparent transparent transparent; 
border- 70px 50px 0 50px; 
} 

28、阴阳八卦（霸气的这个）

代码如下:

#yin-yang { 
96px; 
height: 48px; 
background: #eee; 
border-color: red; 
border-style: solid; 
border- 2px 2px 50px 2px; 
border-radius: 100%; 
position: relative; 
} 
#yin-yang:before { 
content: ""; 
position: absolute; 
top: 50%; 
left: 0; 
background: #eee; 
border: 18px solid red; 
border-radius: 100%; 
12px; 
height: 12px; 
} 
#yin-yang:after { 
content: ""; 
position: absolute; 
top: 50%; 
left: 50%; 
background: red; 
border: 18px solid #eee; 
border-radius:100%; 
12px; 
height: 12px; 
} 

好了，就到这里了，一共28个，个人觉得后面几个比较犀利。这些代码的来源是css-tricks。

转载自：http://www.itivy.com/ivy/archive/2012/1/16/css-shape.html

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/Bideam/p/6830552.html