CSS画基本图形
精彩分享
CSS画基本图形，图形包括基本的矩形、圆形、 椭圆、三角形、多边形，也包括稍微复杂一点的爱心、钻石、阴阳八卦等。当然有一些需要用到CSS3的属性。
------------------------------------------------------------------------------------------------------------------------------------
/*正方形*/
.square{ width:100px; height:100px; background:red;} 效果图：
------------------------------------------------------------------------------------------------------------------------------------
/*长方形*/
.rectangle{ width:200px; height:100px; background:red;} 效果图：
-----------------------------------------------------------------------------------------------------------------------------------
/*圆形*/
.circle{ width:100px; height:100px; background:red; border-radius:50%;} 效果图：
-----------------------------------------------------------------------------------------------------------------------------------
/*椭圆*/
.oval{ width:200px; height:100px; background:red; border-radius:200px/100px;} 效果图：
-----------------------------------------------------------------------------------------------------------------------------------
/*上三角*/
.triangle-up{ width:0px; height:0px; border-left:50px solid transparent;
border-right:50px solid transparent; border-bottom:100px solid red;} 效果图：
------------------------------------------------------------------------------------------------------------------------------------
/*下三角*/
.triangle-down{ width:0px; height:0px; border-left:50px solid transparent;
border-right:50px solid transparent; border-top:100px solid red;} 效果图：
-------------------------------------------------------------------------------------------------------------------------------------
/*左三角*/
.triangle-left{ width:0px; height:0px; border-top:50px solid transparent;
border-right:100px solid red; border-bottom:50px solid transparent;} 效果图：
-----------------------------------------------------------------------------------------------------------------------------------
/*右三角*/
.triangle-right{ width:0px; height:0px; border-top:50px solid transparent;
border-left:100px solid red; border-bottom:50px solid transparent;} 效果图：
------------------------------------------------------------------------------------------------------------------------------------
/*左上三角*/
.triangle-topleft{ width:0px; height:0px; border-top:100px solid red;
border-right:100px solid transparent;} 效果图：
-----------------------------------------------------------------------------------------------------------------------------------
/*右上三角*/
.triangle-topright{ width:0px; height:0px; border-top:100px solid red;
border-left:100px solid transparent;} 效果图：
------------------------------------------------------------------------------------------------------------------------------------
/*左下三角*/
.triangle-bottomleft{ width:0px; height:0px; border-bottom:100px solid red;
border-right: 100px solid transparent;} 效果图：
-----------------------------------------------------------------------------------------------------------------------------------
/*右下三角*/
.triangle-bottomright{ width:0px; height:0px; border-bottom:100px solid red;
border-left: 100px solid transparent;} 效果图：
-----------------------------------------------------------------------------------------------------------------------------------
/*平行四边形*/
.parallelogram{ width:150px; height:100px; margin-left:20px; -webkit-transform:
skew(20deg); -moz-transform:skew(20deg); -moz-transform:skew(20deg); -o-transform:
skew(20deg); background:red;} 效果图：
-----------------------------------------------------------------------------------------------------------------------------------
/*梯形*/
.trapezoid{ border-bottom: 100px solid red; border-left:50px solid transparent;
border-right:50px solid transparent; height:0px; width:100px;} 效果图：
-----------------------------------------------------------------------------------------------------------------------------------
/*六角形*/
.star-six{ width:0px; height:0px; border-left:50px solid transparent;
border-right:50px solid transparent; border-bottom: 100px solid red;
position: relative; }
.star-six:after { width:0px; height:0px; border-left:50px solid transparent;
border-right:50px solid transparent; border-top:100px solid red; position:absolute;
content: ""; top: 30px; left: -50px;} 效果图：
-----------------------------------------------------------------------------------------------------------------------------------
/*五角星*/
.star-five{ margin:50px 0px; 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:0px; width:0px; 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: ''; } 效果图：
------------------------------------------------------------------------------------------------------------------------------------
/*五角大楼*/
.pentagon{ position:relative; width:54px; border-width:50px 18px 0px;border-style:solid;
border-color:red transparent; }
.pentagon:before { content: ""; position:absolute; height:0px; width:0px; top: -85px; left:
-18px; border-width:0px 45px 35px; border-style:solid; border-color:transparent transparent
red;} 效果图：
------------------------------------------------------------------------------------------------------------------------------------
/*六边形*/
.hexagon{ width:100px; height:55px; background:red; position:relative; }
.hexagon:before { content:""; position:absolute; top:-25px; left:0px; width:0px;
height:0px; border-left:50px solid transparent; border-right:50px solid transparent;
border-bottom: 25px solid red; }
.hexagon:after { content:""; position:absolute; bottom:-25px; left:0px; width: 0px;
height:0px; border-left:50px solid transparent; border-right:50px solid transparent;
border-top:25px solid red;} 效果图：
-----------------------------------------------------------------------------------------------------------------------------------
/*八角形*/
.octagon { width:100px; height:100px; background:red; position:relative; }
.octagon:before { content:""; position:absolute; top:0px; left:0px; border-bottom:
29px solid red; border-left:29px solid #eee; border-right:29px solid #eee; width:42px;
height:0px; }
.octagon:after { content:""; position:absolute; bottom:0px; left:0px; border-top: 29px
solid red; border-left:29px solid #eee; border-right:29px solid #eee; width:42px;
height:0px; } 效果图：
-----------------------------------------------------------------------------------------------------------------------------------
/*爱心*/
.heart { position:relative; width:100px; height:90px; }
.heart:before, .heart:after { position:absolute; content:""; left:50px; top:0px;
width:50px;height:80px; background:red; -moz-border-radius:50px 50px 0px 0px;
border-radius: 50px 50px 0px 0px; -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%; } 效果图：
------------------------------------------------------------------------------------------------------------------------------------
/*无穷大符号*/
.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); } 效果图：
-----------------------------------------------------------------------------------------------------------------------------------