原文：http://www.cnblogs.com/jscode/archive/2012/10/19/2730905.html
今天在css-tricks上看到一篇文章，那篇文章让我不禁心头一震，强大的CSS啊，居然能画出这么多基本的图形。图形包括基本的矩形、圆形、椭圆、三角形、多边形，也包括稍微复杂一点的爱心、钻石、阴阳八卦等。当然有一些需要用到CSS3的属性，所以在你打开这篇文章的时候，我希望你用的是firefox或者chrome，当然IE也能看一部分的。那好，下面就一起来看看我们是如何用纯CSS来画这些图形的，如果你也觉得很震撼，推荐给你的朋友吧。
1、正方形
最终效果：
CSS代码如下：
1 #square {2 width: 100px;3 height: 100px;4 background: red;5 } 2、长方形
最终效果：
CSS代码如下：
1 #rectangle {2 width: 200px;3 height: 100px;4 background: red;5 } 3、圆形
最终效果：
CSS代码如下：
1 #circle {2 width: 100px;3 height: 100px;4 background: red;5 -moz-border-radius: 50px;6 -webkit-border-radius: 50px;7 border-radius: 50px;8 } 4、椭圆
最终效果：
CSS代码如下：
1 #oval {2 width: 200px;3 height: 100px;4 background: red;5 -moz-border-radius: 100px / 50px;6 -webkit-border-radius: 100px / 50px;7 border-radius: 100px / 50px;8 } 5、上三角
最终效果：
CSS代码如下：
1 #triangle-up {2 width: 0;3 height: 0;4 border-left: 50px solid transparent;5 border-right: 50px solid transparent;6 border-bottom: 100px solid red;7 } 6、下三角
最终效果：
CSS代码如下：
1 #triangle-down {2 width: 0;3 height: 0;4 border-left: 50px solid transparent;5 border-right: 50px solid transparent;6 border-top: 100px solid red;7 } 7、左三角
最终效果：
CSS代码如下：
1 #triangle-left {2 width: 0;3 height: 0;4 border-top: 50px solid transparent;5 border-right: 100px solid red;6 border-bottom: 50px solid transparent;7 } 8、右三角
最终效果：
CSS代码如下：
1 #triangle-right {2 width: 0;3 height: 0;4 border-top: 50px solid transparent;5 border-left: 100px solid red;6 border-bottom: 50px solid transparent;7 } 9、左上三角
最终效果：
CSS代码如下：
1 #triangle-topleft {2 width: 0;3 height: 0;4 border-top: 100px solid red;5 border-right: 100px solid transparent; 6 } 10、右上三角
最终效果：
CSS代码如下：
1 #triangle-topright {2 width: 0;3 height: 0;4 border-top: 100px solid red;5 border-left: 100px solid transparent;6 7 } 11、左下三角
最终效果：
CSS代码如下：
1 #triangle-bottomleft {2 width: 0;3 height: 0;4 border-bottom: 100px solid red;5 border-right: 100px solid transparent; 6 } 12、右下三角
最终效果：
CSS代码如下：
1 #triangle-bottomright {2 width: 0;3 height: 0;4 border-bottom: 100px solid red;5 border-left: 100px solid transparent;6 } 13、平行四边形
最终效果：
CSS代码如下：
1 #parallelogram {2 width: 150px;3 height: 100px;4 margin-left:20px;5 -webkit-transform: skew(20deg);6 -moz-transform: skew(20deg);7 -o-transform: skew(20deg);8 background: red;9 } 14、梯形
最终效果：
CSS代码如下：
1 #trapezoid {2 border-bottom: 100px solid red;3 border-left: 50px solid transparent;4 border-right: 50px solid transparent;5 height: 0;6 width: 100px;7 } 15、六角星
最终效果：
CSS代码如下：
1 #star-six { 2 width: 0; 3 height: 0; 4 border-left: 50px solid transparent; 5 border-right: 50px solid transparent; 6 border-bottom: 100px solid red; 7 position: relative; 8 } 9 #star-six:after {10 width: 0;11 height: 0;12 border-left: 50px solid transparent;13 border-right: 50px solid transparent;14 border-top: 100px solid red;15 position: absolute;16 content: "";17 top: 30px;18 left: -50px;19 } 16、五角星
最终效果：
CSS代码如下：
1 #star-five { 2 margin: 50px 0; 3 position: relative; 4 display: block; 5 color: red; 6 width: 0px; 7 height: 0px; 8 border-right: 100px solid transparent; 9 border-bottom: 70px solid red;10 border-left: 100px solid transparent;11 -moz-transform: rotate(35deg);12 -webkit-transform: rotate(35deg);13 -ms-transform: rotate(35deg);14 -o-transform: rotate(35deg);15 }16 #star-five:before {17 border-bottom: 80px solid red;18 border-left: 30px solid transparent;19 border-right: 30px solid transparent;20 position: absolute;21 height: 0;22 width: 0;23 top: -45px;24 left: -65px;25 display: block;26 content: '';27 -webkit-transform: rotate(-35deg);28 -moz-transform: rotate(-35deg);29 -ms-transform: rotate(-35deg);30 -o-transform: rotate(-35deg);31 32 }33 #star-five:after {34 position: absolute;35 display: block;36 color: red;37 top: 3px;38 left: -105px;39 width: 0px;40 height: 0px;41 border-right: 100px solid transparent;42 border-bottom: 70px solid red;43 border-left: 100px solid transparent;44 -webkit-transform: rotate(-70deg);45 -moz-transform: rotate(-70deg);46 -ms-transform: rotate(-70deg);47 -o-transform: rotate(-70deg);48 content: '';49 } 17、五角大楼
最终效果：
CSS代码如下：
1 #pentagon { 2 position: relative; 3 width: 54px; 4 border-width: 50px 18px 0; 5 border-style: solid; 6 border-color: red transparent; 7 } 8 #pentagon:before { 9 content: "";10 position: absolute;11 height: 0;12 width: 0;13 top: -85px;14 left: -18px;15 border-width: 0 45px 35px;16 border-style: solid;17 border-color: transparent transparent red;18 } 18、六边形
最终效果：
CSS代码如下：
1 #hexagon { 2 width: 100px; 3 height: 55px; 4 background: red; 5 position: relative; 6 } 7 #hexagon:before { 8 content: ""; 9 position: absolute;10 top: -25px;11 left: 0;12 width: 0;13 height: 0;14 border-left: 50px solid transparent;15 border-right: 50px solid transparent;16 border-bottom: 25px solid red;17 }18 #hexagon:after {19 content: "";20 position: absolute;21 bottom: -25px;22 left: 0;23 width: 0;24 height: 0;25 border-left: 50px solid transparent;26 border-right: 50px solid transparent;27 border-top: 25px solid red;28 } 19、八角形
最终效果：
CSS代码如下：
1 #octagon { 2 width: 100px; 3 height: 100px; 4 background: red; 5 position: relative; 6 } 7 8 #octagon:before { 9 content: "";10 position: absolute;11 top: 0;12 left: 0; 13 border-bottom: 29px solid red;14 border-left: 29px solid #eee;15 border-right: 29px solid #eee;16 width: 42px;17 height: 0;18 }19 20 #octagon:after {21 content: "";22 position: absolute;23 bottom: 0;24 left: 0; 25 border-top: 29px solid red;26 border-left: 29px solid #eee;27 border-right: 29px solid #eee;28 width: 42px;29 height: 0;30 } 20、爱心
最终效果：
CSS代码如下：
1 #heart { 2 position: relative; 3 width: 100px; 4 height: 90px; 5 } 6 #heart:before, 7 #heart:after { 8 position: absolute; 9 content: "";10 left: 50px;11 top: 0;12 width: 50px;13 height: 80px;14 background: red;15 -moz-border-radius: 50px 50px 0 0;16 border-radius: 50px 50px 0 0;17 -webkit-transform: rotate(-45deg);18 -moz-transform: rotate(-45deg);19 -ms-transform: rotate(-45deg);20 -o-transform: rotate(-45deg);21 transform: rotate(-45deg);22 -webkit-transform-origin: 0 100%;23 -moz-transform-origin: 0 100%;24 -ms-transform-origin: 0 100%;25 -o-transform-origin: 0 100%;26 transform-origin: 0 100%;27 }28 #heart:after {29 left: 0;30 -webkit-transform: rotate(45deg);31 -moz-transform: rotate(45deg);32 -ms-transform: rotate(45deg);33 -o-transform: rotate(45deg);34 transform: rotate(45deg);35 -webkit-transform-origin: 100% 100%;36 -moz-transform-origin: 100% 100%;37 -ms-transform-origin: 100% 100%;38 -o-transform-origin: 100% 100%;39 transform-origin :100% 100%;40 } 21、无穷大符号
最终效果：
CSS代码如下：
1 #infinity { 2 position: relative; 3 width: 212px; 4 height: 100px; 5 } 6 7 #infinity:before, 8 #infinity:after { 9 content: "";10 position: absolute;11 top: 0;12 left: 0;13 width: 60px;14 height: 60px; 15 border: 20px solid red;16 -moz-border-radius: 50px 50px 0 50px;17 border-radius: 50px 50px 0 50px;18 -webkit-transform: rotate(-45deg);19 -moz-transform: rotate(-45deg);20 -ms-transform: rotate(-45deg);21 -o-transform: rotate(-45deg);22 transform: rotate(-45deg);23 }24 25 #infinity:after {26 left: auto;27 right: 0;28 -moz-border-radius: 50px 50px 50px 0;29 border-radius: 50px 50px 50px 0;30 -webkit-transform: rotate(45deg);31 -moz-transform: rotate(45deg);32 -ms-transform: rotate(45deg);33 -o-transform: rotate(45deg);34 transform: rotate(45deg);35 } 22、鸡蛋
最终效果
CSS代码如下：
#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%;} 23、食逗人（Pac-Man）
最终效果：
CSS代码如下：
1 #pacman { 2 width: 0px; 3 height: 0px; 4 border-right: 60px solid transparent; 5 border-top: 60px solid red; 6 border-left: 60px solid red; 7 border-bottom: 60px solid red; 8 border-top-left-radius: 60px; 9 border-top-right-radius: 60px;10 border-bottom-left-radius: 60px;11 border-bottom-right-radius: 60px;12 } 24、提示对话框
CSS代码如下：
1 #talkbubble { 2 width: 120px; 3 height: 80px; 4 background: red; 5 position: relative; 6 -moz-border-radius: 10px; 7 -webkit-border-radius: 10px; 8 border-radius: 10px; 9 }10 #talkbubble:before {11 content:"";12 position: absolute;13 right: 100%;14 top: 26px;15 width: 0;16 height: 0;17 border-top: 13px solid transparent;18 border-right: 26px solid red;19 border-bottom: 13px solid transparent;20 } 25、12角星
最终效果：
CSS代码如下：
1 #burst-12 { 2 background: red; 3 width: 80px; 4 height: 80px; 5 position: relative; 6 text-align: center; 7 } 8 #burst-12:before, #burst-12:after { 9 content: "";10 position: absolute;11 top: 0;12 left: 0;13 height: 80px;14 width: 80px;15 background: red;16 }17 #burst-12:before {18 -webkit-transform: rotate(30deg);19 -moz-transform: rotate(30deg);20 -ms-transform: rotate(30deg);21 -o-transform: rotate(30deg);22 transform: rotate(30deg);23 }24 #burst-12:after {25 -webkit-transform: rotate(60deg);26 -moz-transform: rotate(60deg);27 -ms-transform: rotate(60deg);28 -o-transform: rotate(60deg);29 transform: rotate(60deg);30 } 26、8角星
最终效果：
CSS代码如下：
1 #burst-8 { 2 background: red; 3 width: 80px; 4 height: 80px; 5 position: relative; 6 text-align: center; 7 -webkit-transform: rotate(20deg); 8 -moz-transform: rotate(20deg); 9 -ms-transform: rotate(20deg);10 -o-transform: rotate(20eg);11 transform: rotate(20deg);12 }13 #burst-8:before {14 content: "";15 position: absolute;16 top: 0;17 left: 0;18 height: 80px;19 width: 80px;20 background: red;21 -webkit-transform: rotate(135deg);22 -moz-transform: rotate(135deg);23 -ms-transform: rotate(135deg);24 -o-transform: rotate(135deg);25 transform: rotate(135deg);26 } 27、钻石
最终效果：
CSS代码如下：
1 #cut-diamond { 2 border-style: solid; 3 border-color: transparent transparent red transparent; 4 border-width: 0 25px 25px 25px; 5 height: 0; 6 width: 50px; 7 position: relative; 8 margin: 20px 0 50px 0; 9 }10 #cut-diamond:after {11 content: "";12 position: absolute;13 top: 25px;14 left: -25px;15 width: 0;16 height: 0;17 border-style: solid;18 border-color: red transparent transparent transparent;19 border-width: 70px 50px 0 50px;20 } 28、阴阳八卦（霸气的这个）
最终效果：
CSS代码如下：
1 #yin-yang { 2 width: 96px; 3 height: 48px; 4 background: #eee; 5 border-color: red; 6 border-style: solid; 7 border-width: 2px 2px 50px 2px; 8 border-radius: 100%; 9 position: relative;10 }11 12 #yin-yang:before {13 content: "";14 position: absolute;15 top: 50%;16 left: 0;17 background: #eee;18 border: 18px solid red;19 border-radius: 100%;20 width: 12px;21 height: 12px;22 }23 24 #yin-yang:after {25 content: "";26 position: absolute;27 top: 50%;28 left: 50%;29 background: red;30 border: 18px solid #eee;31 border-radius:100%;32 width: 12px;33 height: 12px;34 } 好了，就到这里了，一共28个，个人觉得后面几个比较犀利。这些代码的来源是。由博客整理，转载请保留原文链接：