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

  • 作者:不详
  • 来源:56gee
  • 更新时间:2012-08-13 12:42:16
  • 点击:11917
[0分]
<!--六角星 -->  
#star-six {  
  width: 0;  
  height: 0;  
  border-left: 50px solid transparent;  
  border-right: 50px solid transparent;  
  border-bottom: 100px solid red;  
  position: relative;  
  }  
  #star-six:after {  
  width: 0;  
  height: 0;  
  border-left: 50px solid transparent;  
  border-right: 50px solid transparent;  
  border-top: 100px solid red;  
  position: absolute;  
  content: "";  
  top: 30px;  
  left: -50px;  
}  


<!--五角星 -->  
#star-five {  
   margin: 50px 0;  
   position: relative;  
   display: block;  
   color: red;  
   width: 0px;  
   height: 0px;  
   border-right:  100px solid transparent;  
   border-bottom: 70px  solid red;  
   border-left:   100px solid transparent;  
   -moz-transform:    rotate(35deg);  
   -webkit-transform: rotate(35deg);  
   -ms-transform:     rotate(35deg);  
   -o-transform:      rotate(35deg);  
}  
#star-five:before {  
   border-bottom: 80px solid red;  
   border-left: 30px solid transparent;  
   border-right: 30px solid transparent;  
   position: absolute;  
   height: 0;  
   width: 0;  
   top: -45px;  
   left: -65px;  
   display: block;  
   content: ’’;  
   -webkit-transform: rotate(-35deg);  
   -moz-transform:    rotate(-35deg);  
   -ms-transform:     rotate(-35deg);  
   -o-transform:      rotate(-35deg);  
     
}  
#star-five:after {  
   position: absolute;  
   display: block;  
   color: red;  
   top: 3px;  
   left: -105px;  
   width: 0px;  
   height: 0px;  
   border-right: 100px solid transparent;  
   border-bottom: 70px solid red;  
   border-left: 100px solid transparent;  
   -webkit-transform: rotate(-70deg);  
   -moz-transform:    rotate(-70deg);  
   -ms-transform:     rotate(-70deg);  
   -o-transform:      rotate(-70deg);  
   content: ’’;  
}  


<!--八角星 -->  
#burst-8 {  
    background: red;  
    width: 80px;  
    height: 80px;  
    position: relative;  
    text-align: center;  
    -webkit-transform: rotate(20deg);  
    -moz-transform: rotate(20deg);  
    -ms-transform: rotate(20deg);  
    -o-transform: rotate(20eg);  
    transform: rotate(20deg);  
}  
#burst-8:before {  
    content: "";  
    position: absolute;  
    top: 0;  
    left: 0;  
    height: 80px;  
    width: 80px;  
    background: red;  
    -webkit-transform: rotate(135deg);  
    -moz-transform: rotate(135deg);  
    -ms-transform: rotate(135deg);  
    -o-transform: rotate(135deg);  
    transform: rotate(135deg);  
}  


<!--十二角星 -->  
#burst-12 {  
    background: red;  
    width: 80px;  
    height: 80px;  
    position: relative;  
    text-align: center;  
    -webkit-transform: rotate(20deg);  
    -moz-transform: rotate(20deg);  
    -ms-transform: rotate(20deg);  
    -o-transform: rotate(20eg);  
    transform: rotate(20deg);  
}  
#burst-12:before {  
    content: "";  
    position: absolute;  
    top: 0;  
    left: 0;  
    height: 80px;  
    width: 80px;  
    background: red;  
    -webkit-transform: rotate(135deg);  
    -moz-transform: rotate(135deg);  
    -ms-transform: rotate(135deg);  
    -o-transform: rotate(135deg);  
    transform: rotate(135deg);  
}  


<!--五边形 -->  
#pentagon {  
    position: relative;  
    width: 54px;  
    border-width: 50px 18px 0;  
    border-style: solid;  
    border-color: red transparent;  
}  
#pentagon:before {  
    content: "";  
    position: absolute;  
    height: 0;  
    width: 0;  
    top: -85px;  
    left: -18px;  
    border-width: 0 45px 35px;  
    border-style: solid;  
    border-color: transparent transparent red;  
}  


<!--六边形 -->  
#hexagon {  
  width: 100px;  
  height: 55px;  
  background: red;  
  position: relative;  
}  
#hexagon:before {  
  content: "";  
  position: absolute;  
  top: -25px;   
  left: 0;  
  width: 0;  
  height: 0;  
  border-left: 50px solid transparent;  
  border-right: 50px solid transparent;  
  border-bottom: 25px solid red;  
}  
#hexagon:after {  
  content: "";  
  position: absolute;  
  bottom: -25px;   
  left: 0;  
  width: 0;  
  height: 0;  
  border-left: 50px solid transparent;  
  border-right: 50px solid transparent;  
  border-top: 25px solid red;  
}  


收藏内容
评分

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

栏目精华