奇妙的 clip-path 几何图形

CSS 新属性 clip-path，意味裁剪路径的意思，让我们可以很便捷的生成各种几何图形。

clip-path 通过定义特殊的路径，实现我们想要的图形。而这个路径，正是 SVG 中的 path 。

clip-path  属性api:

/* Keyword values */
clip-path: none;

/* Image values */ 
clip-path: url(resources.svg#c1);

/* Box values
clip-path: fill-box;
clip-path: stroke-box;
clip-path: view-box;
clip-path: margin-box
clip-path: border-box
clip-path: padding-box
clip-path: content-box

/* Geometry values */
/*矩形可以2个值， 也可 4个值    top right bottom left
   矩形可以3个值  第一个值 大小 第二值圆角属性【round】  第三个值圆角大小
*/
clip-path: inset(100px 50px);  
 /*圆形  第一个值大小  第二值 左右水平位置  第三个上下垂直 位置*/
clip-path: circle(50px at 0 100px);   /* */
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

/* Box and geometry values combined */
clip-path: padding-box circle(50px at 0 100px);

/* Global values */
clip-path: inherit;
clip-path: initial;
clip-path: unset;

View Code