1、正方形

最終效果：??

?CSS代碼如下：

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

2、長方形

最終效果：?

CSS代碼如下：

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

3、圓形

最終效果：?

?CSS代碼如下：

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

4、橢圓

最終效果：?

?CSS代碼如下：

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

5、上三角

最終效果：

?

CSS代碼如下：

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

6、下三角

最終效果：?

?CSS代碼如下：

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

7、左三角

最終效果：?

?CSS代碼如下：

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

8、右三角

最終效果：?

?CSS代碼如下：

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

9、左上三角

最終效果：?

?CSS代碼如下：

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

10、右上三角

最終效果：?

?CSS代碼如下：

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

11、左下三角

最終效果：?

?CSS代碼如下：

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

12、右下三角

最終效果：?

?CSS代碼如下：

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

13、平行四邊形

最終效果：?

?CSS代碼如下：

#parallelogram {?
width: 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;?
width: 100px;?
}?

15、六角星

最終效果：?

?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、五角星

最終效果：?

?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、五角大樓

最終效果：

?

?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、六邊形

最終效果：

?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、八角形

最終效果：?

?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、愛心

最終效果：?

?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、無窮大符號

最終效果：

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、雞蛋

?

最終效果?

?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、食逗人（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、提示對話框

最終效果：

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、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、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、鉆石

最終效果：?

?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、陰陽八卦（霸氣的這個）

最終效果：?

?

CSS代碼如下：

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

轉(zhuǎn)載于:https://www.cnblogs.com/TigerZhang-home/p/6908995.html

總結(jié)

以上是生活随笔為你收集整理的css3完成多边形的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。