是把图像中某一个需要的部分抠出来,那么完整的代码如下
请使用谷歌浏览器打开右侧demo→:css等边五边形
效果如下:
css3中shape形状属性还跟box-sizing,margin-box,padding-box,borde-box有关系,比较大家css中最最最最最基础的就是盒子模型,shape形状也是基于盒子模型进化而来,为了也是适应时代的需求,再也不可能100年都是矩形、正方形或者圆形。当然,w3c中还可以定义图像的shape形状,这些就不一一去说了,个人觉得假如可以以后这个属性有一天对浏览器们都兼容了,那我们看见的头像可能是五边形、六边形或者是N边形并是非常有可能的,不在仅仅局限于我们目前所见的这些常规形状。当然,这些文字围绕某个多边形图片转转非常适合运用到时尚周刊上的排版去。
那么,更加精彩的等你去研究吧。
对了附上一篇国外妹纸写一篇文章CSS Shapes 101
参考资料:
http://dev.w3.org/csswg/css-shapes/
http://www.qianduan.net/https://developer.mozilla.org/en-US/docs/Web/CSS/shape
本文地址:http://xiaoho.com/?p=881