CSS3图形,Css画图,Css3三角形

CSS3 图形

圆：

Html代码 

1. #circle {   
2.     140px;  
3.    height: 140px;  
4.    background: red;   
5.    -moz-border-radius: 70px;   
6.    -webkit-border-radius: 70px;   
7.    border-radius: 70px;  
8. }  

正方形：

Html代码 

1. #square {  
2.     140px;   
3.    height: 140px;   
4.    background: blue;   
5. }  

椭圆：

Html代码 

1. #oval {  
2.     200px;   
3.    height: 100px;   
4.    background: purple;   
5.    -moz-border-radius: 100px / 50px;   
6.    -webkit-border-radius: 100px / 50px;   
7.    border-radius: 100px / 50px;  
8. }  

上三角形：

Html代码 

1. #up-triangle {  
2.     0;   
3.    height: 0;   
4.    border-bottom: 120px solid green;   
5.    border-left: 60px solid transparent;   
6.    border-right: 60px solid transparent;   
7. }  

下三角形：

Html代码 

1. #down-triangle {   
2.     0;   
3.    height: 0;  
4.    border-top: 80px solid pink;  
5.    border-left: 60px solid transparent;   
6.    border-right: 60px solid transparent;   
7. }  

左三角形：

Html代码 

1. #left-triangle {  
2.     0;  
3.    height: 0;  
4.    border-right: 100px solid orange;  
5.    border-top: 50px solid transparent;  
6.    border-bottom: 50px solid transparent;  
7. }  

右三角形：

Html代码 

1. #right-triangle {  
2.     0;  
3.    height: 0;  
4.    border-left: 100px solid red;  
5.    border-top: 50px solid transparent;  
6.    border-bottom: 50px solid transparent;  
7. }  

梯形：

Html代码

1. #trapezium {  
2.    height: 0;   
3.     80px;  
4.    border-bottom: 80px solid blue;  
5.    border-left: 40px solid transparent;  
6.    border-right: 40px solid transparent;  
7. }  

菱形：

Html代码

1. #diamond {  
2.     80px;   
3.    height: 80px;   
4.    background: purple;  
5.    margin: 3px 0 0 30px;  
6.      
7.    -webkit-transform: rotate(-45deg);  
8.    -moz-transform: rotate(-45deg);  
9.    -ms-transform: rotate(-45deg);  
10.    -o-transform: rotate(-45deg);  
11.    transform: rotate(-45deg);  
12.      
13.    -webkit-transform-origin: 0 100%;  
14.    -moz-transform-origin: 0 100%;  
15.    -ms-transform-origin: 0 100%;  
16.    -o-transform-origin: 0 100%;  
17.    transform-origin: 0 100%;  
18. }  

长方形：

Html代码

1. #rectangle {  
2.     140px;   
3.    height: 80px;  
4.    background: green;  
5. }  

平行四边形：

Html代码

1. #parallelogram {  
2.     130px;   
3.    height: 75px;  
4.    background: pink;  
5.      
6.    -webkit-transform: skew(20deg);   
7.    -moz-transform: skew(20deg);   
8.    -o-transform: skew(20deg);  
9.    transform: skew(20deg);  
10. }  

多边形：

Html代码

1. #twelve-point-star {  
2.    height: 100px;  
3.     100px;  
4.    background: orange;  
5.    position: absolute;  
6. }  
7. #twelve-point-star:before {  
8.    height: 100px;  
9.     100px;  
10.    background: orange;  
11.    content:"";  
12.    position: absolute;  
13.      
14.    -moz-transform: rotate(30deg);  
15.    -webkit-transform: rotate(30deg);  
16.    -ms-transform: rotate(30deg);  
17.    -o-transform: rotate(30deg);  
18.    transform: rotate(30deg);  
19. }  
20. #twelve-point-star:after {  
21.    height: 100px;  
22.     100px;  
23.    background: orange;  
24.    content:"";  
25.    position: absolute;  
26.      
27.    -moz-transform: rotate(-30deg);  
28.    -webkit-transform: rotate(-30deg);  
29.    -ms-transform: rotate(-30deg);  
30.    -o-transform: rotate(-30deg);  
31.    transform: rotate(-30deg);  
32. }  

多边形：

Html代码

1. #six-point-star {  
2.    position: absolute;  
3.     0;   
4.    height: 0;   
5.    border-left: 50px solid transparent;   
6.    border-right: 50px solid transparent;   
7.    border-bottom: 80px solid red;  
8. }  
9. #six-point-star:after {  
10.    content:"";  
11.    position: absolute;  
12.     0;   
13.    height: 0;   
14.    border-left: 50px solid transparent;   
15.    border-right: 50px solid transparent;   
16.    border-top: 80px solid red;  
17.    margin: 30px 0 0 -50px;  
18. }  

多边形3：

Html代码

1. #octagon {  
2.     100px;   
3.    height: 100px;   
4.    background: blue;  
5. }  
6. #octagon:before {  
7.    height: 0;  
8.     40px;  
9.    content:"";  
10.    position: absolute;   
11.    border-bottom: 30px solid blue;  
12.    border-left: 30px solid white;   
13.    border-right: 30px solid white;   
14. }  
15. #octagon:after {  
16.    height: 0;  
17.     40px;  
18.    content:"";  
19.    position: absolute;   
20.    border-top: 30px solid blue;   
21.    border-left: 30px solid white;    
22.    border-right: 30px solid white;   
23.    margin: 70px 0 0 0;  
24. }  

提示：

Html代码

1. #speech-bubble {  
2.     120px;   
3.    height: 80px;   
4.    background: purple;  
5.    position: absolute;  
6.    -moz-border-radius: 10px;   
7.    -webkit-border-radius: 10px;   
8.    border-radius: 10px;  
9. }  
10. #speech-bubble:before {  
11.    content:"";  
12.    position: absolute;  
13.     0;  
14.    height: 0;  
15.    border-top: 13px solid transparent;  
16.    border-right: 26px solid purple;  
17.    border-bottom: 13px solid transparent;  
18.    margin: 13px 0 0 -25px;  
19. }  

鸡蛋：

Html代码

1. #egg {  
2.    display:block;  
3.    126px;   
4.   
5.   
6.    height:180px;  
7.    background-color:green;  
8.   
9.   
10.    -webkit-border-radius:63px 63px 63px 63px/  
11.    108px 108px 72px 72px;  
12.      
13.    border-radius:50% 50% 50% 50%/60% 60% 40% 40%;  
14. }  

等边三角形：

Html代码

1. #eq-triangle {  
2.    0;  
3.   height: 0;  
4.   border-bottom: 104px solid navy;  
5.     
6.   border-left: 60px solid transparent;  
7.   border-right: 60px solid transparent;  
8. }  

不完整圆：

Html代码

1. .pacman {  
2.    0px;  
3.   height: 0px;  
4.   border-right: 60px solid transparent;  
5.   border-top: 60px solid yellow;  
6.   border-left: 60px solid yellow;  
7.   border-bottom: 60px solid yellow;  
8.   border-top-left-radius: 60px;  
9.   border-top-right-radius: 60px;  
10.   border-bottom-left-radius: 60px;  
11.   border-bottom-right-radius: 60px;  
12. }  

圆相关：

Html代码

1. .biohazard {  
2.    0;  
3.   height: 0;  
4.   border-bottom: 60px solid black;  
5.   border-top: 60px solid black;  
6.   border-left: 60px solid yellow;  
7.   border-right: 60px solid yellow;  
8.   -moz-border-radius: 60px;   
9.   -webkit-border-radius: 60px;   
10.   border-radius: 60px;  
11. }  

心形：

Html代码

1. #heart {   
2.     position: relative;  
3. }  
4. #heart:before, #heart:after {  
5.     position: absolute;  
6.   content: "";  
7.     left: 70px; top: 0;  
8.      70px;  
9.     height: 115px;  
10.     background: red;  
11.     -moz-border-radius: 50px 50px 0 0;  
12.     border-radius: 50px 50px 0 0;  
13.     -webkit-transform: rotate(-45deg);  
14.     -moz-transform: rotate(-45deg);  
15.     -ms-transform: rotate(-45deg);  
16.     -o-transform: rotate(-45deg);  
17.     transform: rotate(-45deg);  
18.     -webkit-transform-origin: 0 100%;  
19.     -moz-transform-origin: 0 100%;  
20.     -ms-transform-origin: 0 100%;  
21.     -o-transform-origin: 0 100%;  
22.     transform-origin: 0 100%;  
23. }  
24. #heart:after {   
25.     left: 0;   
26.     -webkit-transform: rotate(45deg);   
27.     -moz-transform: rotate(45deg);   
28.     -ms-transform: rotate(45deg);   
29.     -o-transform: rotate(45deg);  
30.     transform: rotate(45deg);  
31.     -webkit-transform-origin: 100% 100%;  
32.     -moz-transform-origin: 100% 100%;  
33.