使用CSS3制作各种形状的图形

使用CSS3制作各种形状的图形

圆形：

#circle {
	 120px;
	height: 120px;
	background: red;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}

圆形的写法主要在于设置 border-radius的值为width及height值的一半。

---

椭圆：

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

椭圆的border-radius包含2个值，用/隔开，分别为width和height值的x%

，通常设为50%。

---

尖角朝上的正三角形：

#triangle_up {
    0; 
   height: 0;  
   border-bottom: 140px solid red; 
   border-left: 70px solid transparent; 
   border-right: 70px solid transparent; 
}

画三角形的原理如下图所示，图一中，中间的红色方框是一个盒子(box)，4个梯形就是上下左右4个border。

当我们把盒子的 width和height设置为0时，中间的盒子会消失（这里为了展现效果，只是把width和height设置得很小），4个三角形就是上下左右4个border。

这时我们再给下面的三角形设置一个背景色，把左右两个三角形设置为透明（transparent），一个尖角朝上的三角形就画出来了。

其他尖角朝向其他方向的三角形也可以通过这种方法画出。另外可以通过修改border-bottom，border-left，border-right，border-top的值来修改三角形的角的角度。

---

尖角朝下的正三角形：

#triangle_down {
    0; 
   height: 0;  
   border-top: 140px solid red; 
   border-left: 70px solid transparent; 
   border-right: 70px solid transparent; 
}

---

尖角朝左的正三角形：

#triangle_left {
    0; 
   height: 0;  
   border-top: 70px solid transparent; 
   border-right: 140px solid red; 
   border-bottom: 70px solid transparent; 
}

---

尖角朝右的正三角形：

#triangle_right {
    0; 
   height: 0;  
   border-top: 70px solid transparent; 
   border-left: 140px solid red; 
   border-bottom: 70px solid transparent; 
}

---

菱形：

#diamond {
	 120px;
	height: 120px;
	background: red;
/* Rotate */
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
/* Rotate Origin */
	-webkit-transform-origin: 0 100%;
	-moz-transform-origin: 0 100%;
	-ms-transform-origin: 0 100%;
	-o-transform-origin: 0 100%;
	transform-origin: 0 100%;
	margin: 60px 0 10px 310px;
}	

transform: rotate(-45deg)是定义2D旋转及旋转的角度，transform-oragin: 0 100%是定义旋转的基点。

---

梯形：

#trapezium {
	height: 0;
	 120px;
	border-bottom: 120px solid red;
	border-left: 60px solid transparent;
	border-right: 60px solid transparent;
}

---

平行四边形：

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

平行四边形的制作方式是使用transform属性使长方形倾斜一个角度。

---

心形：

#heart {
    position: relative;
}
  
#heart:before,#heart:after {
    content: "";
     70px;
    height: 115px;
    position: absolute;
    background: red;
    left: 70px;
    top: 0;
    -webkit-border-radius: 50px 50px 0 0;
    -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%;
}  

心形的制作是非常复杂的，可以使用伪元素来制作，分别将伪元素旋转不同的角度，并修改transform-origin属性来元素的旋转中心点。

---

其他复杂图形的制作