CSS画基本图形

      精彩分享

      CSS画基本图形,图形包括基本的矩形、圆形、 椭圆、三角形、多边形,也包括稍微复杂一点的爱心、钻石、阴阳八卦等。当然有一些需要用到CSS3的属性。

------------------------------------------------------------------------------------------------------------------------------------

/*正方形*/
.square{ width:100px; height:100px; background:red;}

  效果图:
CSS画基本图形

------------------------------------------------------------------------------------------------------------------------------------

/*长方形*/
.rectangle{ width:200px; height:100px; background:red;}

  效果图:
CSS画基本图形
 -----------------------------------------------------------------------------------------------------------------------------------

/*圆形*/
.circle{ width:100px; height:100px; background:red; border-radius:50%;}

  效果图:
CSS画基本图形
 -----------------------------------------------------------------------------------------------------------------------------------

/*椭圆*/
.oval{ width:200px; height:100px; background:red; border-radius:200px/100px;}

  效果图:
CSS画基本图形
 -----------------------------------------------------------------------------------------------------------------------------------

/*上三角*/
.triangle-up{ width:0px; height:0px; border-left:50px solid transparent;
 border-right:50px solid transparent; border-bottom:100px solid red;}

  效果图:
CSS画基本图形
 ------------------------------------------------------------------------------------------------------------------------------------

/*下三角*/
.triangle-down{ width:0px; height:0px; border-left:50px solid transparent;
 border-right:50px solid transparent; border-top:100px solid red;}

  效果图:
CSS画基本图形
-------------------------------------------------------------------------------------------------------------------------------------

/*左三角*/
.triangle-left{ width:0px; height:0px; border-top:50px solid transparent;
 border-right:100px solid red; border-bottom:50px solid transparent;}

  效果图:
CSS画基本图形
 -----------------------------------------------------------------------------------------------------------------------------------

/*右三角*/
.triangle-right{ width:0px; height:0px; border-top:50px solid transparent;
 border-left:100px solid red; border-bottom:50px solid transparent;}

  效果图:
CSS画基本图形

------------------------------------------------------------------------------------------------------------------------------------

/*左上三角*/
.triangle-topleft{ width:0px; height:0px; border-top:100px solid red;
 border-right:100px solid transparent;}

  效果图:
CSS画基本图形
 -----------------------------------------------------------------------------------------------------------------------------------

/*右上三角*/
.triangle-topright{ width:0px; height:0px; border-top:100px solid red;
 border-left:100px solid transparent;}

  效果图:
CSS画基本图形

------------------------------------------------------------------------------------------------------------------------------------

/*左下三角*/
.triangle-bottomleft{ width:0px; height:0px; border-bottom:100px solid red;
 border-right: 100px solid transparent;}

  效果图:
CSS画基本图形
 -----------------------------------------------------------------------------------------------------------------------------------

/*右下三角*/
.triangle-bottomright{ width:0px; height:0px; border-bottom:100px solid red;
 border-left: 100px solid transparent;}

  效果图:
CSS画基本图形
 -----------------------------------------------------------------------------------------------------------------------------------

/*平行四边形*/
.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;}

  效果图:
CSS画基本图形
 -----------------------------------------------------------------------------------------------------------------------------------

/*梯形*/
.trapezoid{  border-bottom: 100px solid red; border-left:50px solid transparent;
 border-right:50px solid transparent; height:0px; width:100px;}

  效果图:
CSS画基本图形
 -----------------------------------------------------------------------------------------------------------------------------------

/*六角形*/
.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;}

  效果图:
CSS画基本图形
 -----------------------------------------------------------------------------------------------------------------------------------

/*五角星*/
.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: ''; }

  效果图:
CSS画基本图形
 ------------------------------------------------------------------------------------------------------------------------------------

/*五角大楼*/
.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;}

  效果图:
CSS画基本图形
 ------------------------------------------------------------------------------------------------------------------------------------

/*六边形*/
.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;}

  效果图:
CSS画基本图形
 -----------------------------------------------------------------------------------------------------------------------------------

/*八角形*/
.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; }

  效果图:
CSS画基本图形
 -----------------------------------------------------------------------------------------------------------------------------------

/*爱心*/
.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%; }
  效果图:
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); }
  效果图:
CSS画基本图形
 -----------------------------------------------------------------------------------------------------------------------------------

css

相关推荐