奇妙的 clip-path 几何图形

Posted 2020-10-24 雪剑无影

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

 

 

例如 clip-path: circle(50px at 50px 50px) 表示在元素的 （50px, 50px）处，裁剪生成一个半径为 50px 的圆，以元素的左上角为坐标起点

而整个 clip-path 属性，最为重要的当属 polygon，可以利用 polygon 生成任意多边形, polygon 几对【x,y】几边形，值可以 是百分比，也可以使用具体的数值。

下面分别列举使用 clip-path 生成一个圆形和一个十边形：

/* 圆形 */
.circle {
  width: 100px;
  height: 100px;
  background-color: yellowgreen; 
  clip-path: circle(50px at 50px 50px);
}

/* 十边形 */
.polygon {
  width: 100px;
  height: 100px;
  background-color: yellowgreen; 
  /*polygon(x1,y1,x2,y2...)*/
  clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);
}

View Code