用纯CSS“绘”出各种形状图形的源码[3]

  • 作者:不详
  • 来源:56gee
  • 更新时间:2012-08-13 12:42:16
  • 点击:11917
[0分]
<!--桃心形 -->  
#heart {  
    position: relative;  
    width: 100px;  
    height: 90px;  
}  
#heart:before,#heart:after {  
    position: absolute;  
    content: "";  
    left: 50px;  
    top: 0;  
    width: 50px;  
    height: 80px;  
    background: red;  
    -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%;  
}  


<!--无限大符号 -->  
#infinity {  
    position: relative;  
    width: 212px;  
    height: 100px;  
}  

#infinity:before,#infinity:after {  
    content: "";  
    position: absolute;  
    top: 0;  
    left: 0;  
    width: 60px;  
    height: 60px;      
    border: 20px solid red;  
    -moz-border-radius: 50px 50px 0 50px;  
    border-radius: 50px 50px 0 50px;  
    -webkit-transform: rotate(-45deg);  
    -moz-transform: rotate(-45deg);  
    -ms-transform: rotate(-45deg);  
    -o-transform: rotate(-45deg);  
    transform: rotate(-45deg);  
}  
   
#infinity:after {  
    left: auto;  
    right: 0;  
    -moz-border-radius: 50px 50px 50px 0;  
    border-radius: 50px 50px 50px 0;  
    -webkit-transform: rotate(45deg);  
    -moz-transform: rotate(45deg);  
    -ms-transform: rotate(45deg);  
    -o-transform: rotate(45deg);  
    transform: rotate(45deg);  
}  


<!--蛋形 -->  
#egg {  
   display:block;  
   width: 126px;   
   height: 180px;  
   background-color: red;  
   -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;  
   border-radius: 50%   50%  50%  50%  / 60%   60%   40%  40%;  
}  


<!--提示对话框 -->  
#talkbubble {  
   width: 120px;   
   height: 80px;   
   background: red;  
   position: relative;  
   -moz-border-radius:    10px;   
   -webkit-border-radius: 10px;   
   border-radius:         10px;  
}  
#talkbubble:before {  
   content:"";  
   position: absolute;  
   right: 100%;  
   top: 26px;  
   width: 0;  
   height: 0;  
   border-top: 13px solid transparent;  
   border-right: 26px solid red;  
   border-bottom: 13px solid transparent;  
}  


<!--钻石 -->  
#cut-diamond {  
    border-style: solid;  
    border-color: transparent transparent red transparent;  
    border-width: 0 25px 25px 25px;  
    height: 0;  
    width: 50px;  
    position: relative;  
    margin: 20px 0 50px 0;  
}  
#cut-diamond:after {  
    content: "";  
    position: absolute;  
    top: 25px;  
    left: -25px;  
    width: 0;  
    height: 0;  
    border-style: solid;  
    border-color: red transparent transparent transparent;  
    border-width: 70px 50px 0 50px;  
}  


<!--八卦 -->  
#yin-yang {  
  width: 96px;  
  height: 48px;  
  background: #eee;  
  border-color: red;  
  border-style: solid;  
  border-width: 2px 2px 50px 2px;  
  border-radius: 100%;  
  position: relative;  
}  

#yin-yang:before {  
  content: "";  
  position: absolute;  
  top: 50%;  
  left: 0;  
  background: #eee;  
  border: 18px solid red;  
  border-radius: 100%;  
  width: 12px;  
  height: 12px;  
}  

#yin-yang:after {  
  content: "";  
  position: absolute;  
  top: 50%;  
  left: 50%;  
  background: red;  
  border: 18px solid #eee;  
  border-radius:100%;  
  width: 12px;  
  height: 12px;  
}  
收藏内容
评分

特别说明:本站所有资源仅供学习与参考,请勿用于商业用途。若转载请注明来自56gee.com中的“来源”。

栏目精华