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); }效果图:
-----------------------------------------------------------------------------------------------------------------------------------