css3制作八棱锥_使用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属性来元素的旋转中心点。