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

CSS3 图形

圆：

Html代码 
  1. #circle {   
  2.    width: 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.    width: 140px;   
  3.    height: 140px;   
  4.    background: blue;   
  5. }  

 

椭圆：

Html代码 
  1. #oval {  
  2.    width: 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.    width: 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.    width: 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.    width: 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.    width: 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.    width: 80px;  
  4.    border-bottom: 80px solid blue;  
  5.    border-left: 40px solid transparent;  
  6.    border-right: 40px solid transparent;  
  7. }  

 

 

菱形：

Html代码
  1. #diamond {  
  2.    width: 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.    width: 140px;   
  3.    height: 80px;  
  4.    background: green;  
  5. }  

 

平行四边形：

Html代码
  1. #parallelogram {  
  2.    width: 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.    width: 100px;  
  4.    background: orange;  
  5.    position: absolute;  
  6. }  
  7. #twelve-point-star:before {  
  8.    height: 100px;  
  9.    width: 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.    width: 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.    width: 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.    width: 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.    width: 100px;   
  3.    height: 100px;   
  4.    background: blue;  
  5. }  
  6. #octagon:before {  
  7.    height: 0;  
  8.    width: 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.    width: 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.    width: 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.    width: 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.    width: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.   width: 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.   width: 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.   width: 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.     width: 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.  
posted on 2013-05-12 17:22  浩瀚孤鸿  阅读(390)  评论(0)  编辑  收藏  举报

Powered by: 博客园 Copyright © 2024 浩瀚孤鸿
Powered by .NET 8.0 on Kubernetes