28种css3绘制多边形代码分享

html5 • • CSS3教程 • 5640 阅读

本文分享了28种CSS3绘制多边形的代码。在做网页项目中需要使用多边形扇形图形来完成一些功能，第一印象就是使用CSS3来完成。经过查资料发现了transform 的skew()正好合适且且使用方便。

先看一个CSS3绘制多边形扇形的例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSS 画扇形</title>
    <style type="text/css">
    .sector{
        height: 200px;
        width: 200px;
        overflow:hidden;
        transform-origin: 0 100%;
        transform: skew(-50deg);
        position: relative;
        background: #cccccc;
    }
    .sector:before{
        height:inherit;
        width: inherit;
        position: absolute;
        content: "";
        border-radius: 0 200px 0 0;
        background: #fecb2f;
        transform-origin: 0 100%;
        transform: skew(50deg);
    }
    </style>
</head>
<body>
<div class="sector"></div>
</body>
</html>

以下是28种CSS3绘制多边形的CSS代码，全部28中代码对应的DIV容器都一样，如下：

<div class="id"></div>

div的class记得修改成相应的class名。

1、CSS3绘制正方形

 CSS代码如下：
#square { 
width: 100px; 
height: 100px; 
background: red; 
} 

2、 CSS3绘制长方形

 CSS代码如下：#rectangle { 
width: 200px; 
height: 100px; 
background: red; 
} 

3、 CSS3绘制圆形

 CSS代码如下：#circle { 
width: 100px; 
height: 100px; 
background: red; 
-moz-border-radius: 50px; 
-webkit-border-radius: 50px; 
border-radius: 50px; 
} 

4、 CSS3绘制椭圆

 CSS代码如下：#oval { 
width: 200px; 
height: 100px; 
background: red; 
-moz-border-radius: 100px / 50px; 
-webkit-border-radius: 100px / 50px; 
border-radius: 100px / 50px; 
} 

5、 CSS3绘制上三角

CSS代码如下：#triangle-up { 
width: 0; 
height: 0; 
border-left: 50px solid transparent; 
border-right: 50px solid transparent; 
border-bottom: 100px solid red; 
} 

6、 CSS3绘制 下三角

 CSS代码如下：#triangle-down { 
width: 0; 
height: 0; 
border-left: 50px solid transparent; 
border-right: 50px solid transparent; 
border-top: 100px solid red; 
} 

7、 CSS3绘制左三角

 CSS代码如下：
#triangle-left { 
width: 0; 
height: 0; 
border-top: 50px solid transparent; 
border-right: 100px solid red; 
border-bottom: 50px solid transparent; 
} 

8、 CSS3绘制右三角

 CSS代码如下：#triangle-right { 
width: 0; 
height: 0; 
border-top: 50px solid transparent; 
border-left: 100px solid red; 
border-bottom: 50px solid transparent; 
} 

9、 CSS3绘制左上三角

 CSS代码如下：#triangle-topleft { 
width: 0; 
height: 0; 
border-top: 100px solid red; 
border-right: 100px solid transparent; 
} 

10、 CSS3绘制右上三角

 CSS代码如下：

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

11、 CSS3绘制左下三角

 CSS代码如下：#triangle-bottomleft { 
width: 0; 
height: 0; 
border-bottom: 100px solid red; 
border-right: 100px solid transparent; 
} 

12、 CSS3绘制右下三角

 CSS代码如下：

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

13、 CSS3绘制平行四边形

 CSS代码如下：
#parallelogram { 
width: 150px; 
height: 100px; 
margin-left:20px; 
-webkit-transform: skew(20deg); 
-moz-transform: skew(20deg); 
-o-transform: skew(20deg); 
background: red; 
} 

14、 CSS3绘制梯形

 CSS代码如下：#trapezoid { 
border-bottom: 100px solid red; 
border-left: 50px solid transparent; 
border-right: 50px solid transparent; 
height: 0; 
width: 100px; 
} 

15、CSS3绘制六角星

 CSS代码如下：#star-six { 
width: 0; 
height: 0; 
border-left: 50px solid transparent; 
border-right: 50px solid transparent; 
border-bottom: 100px solid red; 
position: relative; 
} 
#star-six:after { 
width: 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、 CSS3绘制五角星

 CSS代码如下：#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); 
} 
#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); 
} 
#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: ''; 
} 

17、 CSS3绘制五角大楼

 CSS代码如下：
#pentagon { 
position: relative; 
width: 54px; 
border-width: 50px 18px 0; 
border-style: solid; 
border-color: red transparent; 
} 
#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; 
} 

18、 CSS3绘制六边形

 CSS代码如下：
#hexagon { 
width: 100px; 
height: 55px; 
background: red; 
position: relative; 
} 
#hexagon:before { 
content: ""; 
position: absolute; 
top: -25px; 
left: 0; 
width: 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; 
width: 0; 
height: 0; 
border-left: 50px solid transparent; 
border-right: 50px solid transparent; 
border-top: 25px solid red; 
} 

19、 CSS3绘制八角形

 CSS代码如下：
#octagon { 
width: 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; 
width: 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; 
width: 42px; 
height: 0; 
} 

20、 CSS3绘制爱心

 CSS代码如下：
#heart { 
position: relative; 
width: 100px; 
height: 90px; 
} 
#heart:before, 
#heart:after { 
position: absolute; 
content: ""; 
left: 50px; 
top: 0; 
width: 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、 CSS3绘制无穷大符号

CSS代码如下：
#infinity { 
position: relative; 
width: 212px; 
height: 100px; 
} 
#infinity:before, 
#infinity:after { 
content: ""; 
position: absolute; 
top: 0; 
left: 0; 
width: 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、 CSS3绘制鸡蛋

 CSS代码如下：
#egg { 
display:block; 
width: 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、 CSS3绘制食逗人（Pac-Man）

 CSS代码如下：
#pacman { 
width: 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、 CSS3绘制提示对话框

 CSS代码如下：

#talkbubble { 
width: 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; 
width: 0; 
height: 0; 
border-top: 13px solid transparent; 
border-right: 26px solid red; 
border-bottom: 13px solid transparent; 
} 

25、 CSS3绘制12角星

 CSS代码如下：
#burst-12 { 
background: red; 
width: 80px; 
height: 80px; 
position: relative; 
text-align: center; 
} 
#burst-12:before, #burst-12:after { 
content: ""; 
position: absolute; 
top: 0; 
left: 0; 
height: 80px; 
width: 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、 CSS3绘制8角星

 CSS代码如下：

#burst-8 { 
background: red; 
width: 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; 
width: 80px; 
background: red; 
-webkit-transform: rotate(135deg); 
-moz-transform: rotate(135deg); 
-ms-transform: rotate(135deg); 
-o-transform: rotate(135deg); 
transform: rotate(135deg); 
} 

27、 CSS3绘制钻石

 CSS代码如下：

#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; 
} 

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

代码如下:
#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; 
} 
#yin-yang:before { 
content: ""; 
position: absolute; 
top: 50%; 
left: 0; 
background: #eee; 
border: 18px solid red; 
border-radius: 100%; 
width: 12px; 
height: 12px; 
} 
#yin-yang:after { 
content: ""; 
position: absolute; 
top: 50%; 
left: 50%; 
background: red; 
border: 18px solid #eee; 
border-radius:100%; 
width: 12px; 
height: 12px; 
} 

好了，就到这里了，一共28个CSS3绘制多边形的代码，个人觉得后面几个比较犀利。

以上是28种css3绘制多边形代码分享的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>