用CSS代码写出的各种形状图形的方法

一共收集整理了图形20个，比较实用，同时也为了熟悉CSS的代码。整合了一下，有错误欢迎指出。

1.正方形

#square {
width: 100px;
height: 100px;
background: red;}

2.长方形

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

3.左上三角

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

4.右上三角

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

5.左下三角

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

6.右下三角

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

7.平行四边形

 
#parallelogram {
width: 150px;
height: 100px;
-webkit-transform: skew(20deg);
  -moz-transform: skew(20deg);
    -o-transform: skew(20deg);
background: red;
}

8.梯形

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

9.六角星

#star-six {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
position: relative;
}
#star-six:after {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
position: absolute;
content: "";
top: 30px;
left: -50px;
}

10.五角星

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