使用CSS3制作各种形状的图形
使用CSS3制作各种形状的图形
圆形：
#circle {
width: 120px;
height: 120px;
background: red;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
圆形的写法主要在于设置 border-radius的值为width及height值的一半。
椭圆：
#oval {
width: 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 {
width: 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 {
width: 0;
height: 0;
border-top: 140px solid red;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
}
尖角朝左的正三角形：
#triangle_left {
width: 0;
height: 0;
border-top: 70px solid transparent;
border-right: 140px solid red;
border-bottom: 70px solid transparent;
}
尖角朝右的正三角形：
#triangle_right {
width: 0;
height: 0;
border-top: 70px solid transparent;
border-left: 140px solid red;
border-bottom: 70px solid transparent;
}
菱形：
#diamond {
width: 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;
width: 120px;
border-bottom: 120px solid red;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
}
平行四边形：
#parallelogram {
width: 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: "";
width: 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属性来元素的旋转中心点。
