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

  • 作者:不详
  • 来源:56gee
  • 更新时间:2012-08-13 12:42:16
  • 点击:11917
[0分]

在WEB设计中,或多或少会由于内容的需要,在页面中展示一下某个特定图形。对于这种情况,设计师们都习惯用图形处理软件事先处理好,然后在网页中插入图片来实现。今天就改变了一下传统的方法:用纯CSS“绘”出各种形状图形

<!--正方形 -->  
#square {   
  width: 100px;   
  height: 100px;   
  background: red;   
}   
<!--长方形 -->   
#rectangle {   
  width: 200px;   
  height: 100px;   
  background: red;   
}   


<!--左上三角行 -->   
#triangle-topleft {   
  width: 0;   
  height: 0;   
  border-top: 100px solid red;    
  border-right: 100px solid transparent;   
}   


<!--右上三角形 -->   
#triangle-topright {   
  width: 0;   
  height: 0;   
  border-top: 100px solid red;    
  border-left: 100px solid transparent;   
}   


<!--左下三角行 -->   
#triangle-bottomleft {   
  width: 0;   
  height: 0;   
  border-bottom: 100px solid red;    
  border-right: 100px solid transparent;   
}   


<!--右下三角形 -->   
#triangle-bottomright {   
  width: 0;   
  height: 0;   
  border-bottom: 100px solid red;    
  border-left: 100px solid transparent;   
}   


<!--平行四边形 -->   
#parallelogram {   
  width: 150px;   
  height: 100px;   
  -webkit-transform: skew(20deg);   
 -moz-transform: skew(20deg);   
   -o-transform: skew(20deg);   
  background: red;   
}   


<!--梯形 -->   
#trapezoid {   
  border-bottom: 100px solid red;   
  border-left: 50px solid transparent;   
  border-right: 50px solid transparent;   
  height: 0;   
  width: 100px;   
}   


收藏内容
评分

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

栏目精华