css裁剪clip clip-path

2015-6-23    分类: css基础教程,前端资源

css裁剪clip

clip:rect(上,右,下,左)

在线实例http://www.zhangxinxu.com/study/201103/css-rect-demo.html

js圆形进度条就是用clip制作

 

 

clip-path:

/* 多边形 */
 clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
/* 圆 */
 clip-path: circle(30px at 35px 35px);
/* 椭圆 */
 clip-path: ellipse(65px 30px at 125px 40px);

案例:http://www.zhangxinxu.com/study/201412/css-clip-path-rect-radius-transition.html