图形包括基本的矩形、圆形、椭圆、三角形、多边形，也包括稍微复杂一点的爱心、钻石、阴阳八卦等。当然有一些需要用到CSS3的属性，所以在你打开这篇文章的时候，我希望你用的是firefox或者chrome，当然IE也能看一部分的。那好，下面就一起来看看我们是如何用纯CSS来画这些图形的，如果你也觉得很震撼，推荐给你的朋友吧。

图形

  

纯CSS画的基本图形技巧绘制（矩形、圆形、三角形、多边形、爱心、八卦等）_椭圆


六边形举例：

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css graph</title>
<style type="text/css" media="screen">

/*六边形*/
#hexagon {
    width: 200px;
    height: 40px;
    background: #f66;
    position: relative;
    margin: 50px 0px 50px 20px;
}
#hexagon:before {
    content: "";
    position: absolute;
   /* top: -25px; */
    left: 200px;
    width: 0;
    height: 0;
    border-top: 20px solid transparent;/*（加大三角形的斜边长度）*/
    border-left: 15px solid red;  /*（加大三角形的高度）*/
    border-bottom: 20px solid transparent; /*（加大三角形的斜边长度）*/
}

#hexagon:after {
    content: "";
    position: absolute;
    /*bottom: -25px; */
    right: 200px;
    width: 0;
    height: 0;
    border-top: 20px solid transparent; 
    border-right: 15px solid red; 
    border-bottom: 20px solid transparent; 
}
</style>
</head>
 
<body>
<div id="hexagon"></div>六边形<br />
</body>
</html>

1、正方形

代码如下:


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

3、圆形

复制代码


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

5、上三角

最终效果：

 

 

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-right { 
width: 0; 
height: 0; 
border-top: 50px solid transparent; 
border-left: 100px solid red; 
border-bottom: 50px solid transparent; 
} 

9、左上三角

最终效果： 

 CSS代码如下：

复制代码


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

11、左下三角

最终效果： 

 CSS代码如下：

复制代码


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

13、平行四边形

复制代码


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

15、六角星

复制代码

#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、五角大楼

复制代码


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

复制代码


#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、鸡蛋形状

复制代码

#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代码如下：

复制代码

#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角星

复制代码

#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画的基本图形技巧绘制（矩形、圆形、三角形、多边形、爱心、八卦等）_css_02

复制代码

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