css样式常见图形效果展示的实例代码

零五零八

简单写一下常见的基础图形，以及一些遇到的样式小图标 下图是css效果⬇
.



各个图形的代码如下：
Square(正方形)

1. /*正方形*/
   
2.    .square {
   
3.       width: 60px;
   
4.       height: 60px;
   
5.       background: red;
   
6.    }

复制代码

  
Circle(圆形)

1. /*圆形*/ /* 可以使用百分比值(大于30%)，但是低版本的Android不支持 */
   
2.    .circle {
   
3.       width: 60px;
   
4.       height: 60px;
   
5.       background: red;
   
6.       -moz-border-radius: 30px;
   
7.       -webkit-border-radius: 30px;
   
8.       border-radius: 30px;
   
9.    }
   

复制代码

Triangle Up(正三角形)

1. /*倒三角*/
   
2.    .triangle-down {
   
3.       width: 0;
   
4.       border: 30px solid red;
   
5.       border-left: 30px solid rgba(0, 0, 0, 0);
   
6.       border-right: 30px solid rgba(0, 0, 0, 0);
   
7.       /*border-top: 30px solid rgba(0, 0, 0, 0);*/
   
8.       border-bottom: 30px solid rgba(0, 0, 0, 0);
   
9.    }

复制代码

Triangle Down(倒三角形)

1. /*倒三角*/
   
2.    .triangle-down {
   
3.       width: 0;
   
4.       border: 30px solid red;
   
5.       border-left: 30px solid rgba(0, 0, 0, 0);
   
6.       border-right: 30px solid rgba(0, 0, 0, 0);
   
7.       /*border-top: 30px solid rgba(0, 0, 0, 0);*/
   
8.       border-bottom: 30px solid rgba(0, 0, 0, 0);
   
9.    }
   

复制代码

Trapezoid(梯形)

1. /*梯形*/
   
2.    .trapezoid {
   
3.       border-bottom: 60px solid red;
   
4.       border-left: 30px solid transparent;
   
5.       border-right: 30px solid transparent;
   
6.       height: 0;
   
7.       width: 60px;
   
8.    }

复制代码

Parallelogram(平行四边形)

1. /*平行四边形*/
   
2.    .parallelogram {
   
3.       width: 100px;
   
4.       height: 60px;
   
5.       -webkit-transform: skew(20deg);
   
6.       -moz-transform: skew(20deg);
   
7.       -o-transform: skew(20deg);
   
8.       background: red;
   
9.    }

复制代码

Pentagon(五边形)

1. /*五边形*/
   
2.    .pentagon {
   
3.       margin-top: 30px;
   
4.       position: relative;
   
5.       width: 54px;
   
6.       border-width: 50px 18px 0;
   
7.       border-style: solid;
   
8.       border-color: red transparent;
   
9.    }
   
10. 
    
11.    .pentagon:before {
    
12.       content: "";
    
13.       position: absolute;
    
14.       height: 0;
    
15.       width: 0;
    
16.       top: -85px;
    
17.       left: -18px;
    
18.       border-width: 0 45px 35px;
    
19.       border-style: solid;
    
20.       border-color: transparent transparent red;
    
21.    }

复制代码

Heart(心形)

1. /*心形*/
   
2.    .heart {
   
3.       position: relative;
   
4.       width: 100px;
   
5.       height: 90px;
   
6.    }
   
7. 
   
8.    .heart:before,
   
9.    .heart:after {
   
10.       position: absolute;
    
11.       content: "";
    
12.       left: 50px;
    
13.       top: 0;
    
14.       width: 50px;
    
15.       height: 80px;
    
16.       background: red;
    
17.       -moz-border-radius: 50px 50px 0 0;
    
18.       border-radius: 50px 50px 0 0;
    
19.       -webkit-transform: rotate(-45deg);
    
20.       -moz-transform: rotate(-45deg);
    
21.       -ms-transform: rotate(-45deg);
    
22.       -o-transform: rotate(-45deg);
    
23.       transform: rotate(-45deg);
    
24.       -webkit-transform-origin: 0 100%;
    
25.       -moz-transform-origin: 0 100%;
    
26.       -ms-transform-origin: 0 100%;
    
27.       -o-transform-origin: 0 100%;
    
28.       transform-origin: 0 100%;
    
29.    }
    
30. 
    
31.    .heart:after {
    
32.       left: 0;
    
33.       -webkit-transform: rotate(45deg);
    
34.       -moz-transform: rotate(45deg);
    
35.       -ms-transform: rotate(45deg);
    
36.       -o-transform: rotate(45deg);
    
37.       transform: rotate(45deg);
    
38.       -webkit-transform-origin: 100% 100%;
    
39.       -moz-transform-origin: 100% 100%;
    
40.       -ms-transform-origin: 100% 100%;
    
41.       -o-transform-origin: 100% 100%;
    
42.       transform-origin: 100% 100%;
    
43.    }

复制代码

Diamond Square(菱形)

1.   /*菱形*/
   
2.    .diamond {
   
3.       width: 0;
   
4.       height: 0;
   
5.       border: 50px solid transparent;
   
6.       border-bottom-color: red;
   
7.       position: relative;
   
8.       top: -50px;
   
9.    }
   
10. 
    
11.    .diamond:after {
    
12.       content: '';
    
13.       position: absolute;
    
14.       left: -50px;
    
15.       top: 50px;
    
16.       width: 0;
    
17.       height: 0;
    
18.       border: 50px solid transparent;
    
19.       border-top-color: red;
    
20.    }

复制代码

Star (5-points)(五角星)

1. /*五角星*/
   
2.    .star-five {
   
3.       margin: 50px 0;
   
4.       position: relative;
   
5.       display: block;
   
6.       color: red;
   
7.       width: 0;
   
8.       height: 0;
   
9.       border-right: 100px solid transparent;
   
10.       border-bottom: 70px solid red;
    
11.       border-left: 100px solid transparent;
    
12.       -moz-transform: rotate(35deg);
    
13.       -webkit-transform: rotate(35deg);
    
14.       -ms-transform: rotate(35deg);
    
15.       -o-transform: rotate(35deg);
    
16.    }
    
17. 
    
18.    .star-five:before {
    
19.       border-bottom: 80px solid red;
    
20.       border-left: 30px solid transparent;
    
21.       border-right: 30px solid transparent;
    
22.       position: absolute;
    
23.       height: 0;
    
24.       width: 0;
    
25.       top: -45px;
    
26.       left: -65px;
    
27.       display: block;
    
28.       content: '';
    
29.       -webkit-transform: rotate(-35deg);
    
30.       -moz-transform: rotate(-35deg);
    
31.       -ms-transform: rotate(-35deg);
    
32.       -o-transform: rotate(-35deg);
    
33. 
    
34.    }
    
35. 
    
36.    .star-five:after {
    
37.       position: absolute;
    
38.       display: block;
    
39.       color: red;
    
40.       top: 3px;
    
41.       left: -105px;
    
42.       width: 0;
    
43.       height: 0;
    
44.       border-right: 100px solid transparent;
    
45.       border-bottom: 70px solid red;
    
46.       border-left: 100px solid transparent;
    
47.       -webkit-transform: rotate(-70deg);
    
48.       -moz-transform: rotate(-70deg);
    
49.       -ms-transform: rotate(-70deg);
    
50.       -o-transform: rotate(-70deg);
    
51.       content: '';
    
52.    }

复制代码

Moon(月亮)

1. /*月亮*/
   
2.    .moon {
   
3.       width: 80px;
   
4.       height: 80px;
   
5.       margin: 0 30px 20px 0;
   
6.       border-radius: 50%;
   
7.       box-shadow: 15px 15px 0 0 red;
   
8.    }

复制代码

Cut Diamond(钻石形)


[code] /*钻石形