神技clip

前段时间追了一部动漫，叫《带着手机闯荡异世界》，男主神技 clip  优势搞笑优势高效，堪称无敌

昨天产品提了个需求，瞬间

这是一个会员卡的背景（就是这么说明的），然后用户可以自己设置背景图，这个黑黑的，只是默认而已。完整的样式是这样的

瞬间心里过了几个可行的而方案

1、这个角角用一个方块的图片覆盖上去，不靠谱

原因：整张卡片的背景都是自定义的背景，如果单独这个角写死一个图片，那么，想想就别扭，会逼死强迫症的

2、整体的背景图就这样搞，不靠谱

原因：还是背景自定义的问题，用户只会上传一个长方形的图片，谁管你二维码什么的，卡片上面的东西都是需要前端大神搞出来的

3、三层叠加一起，第一层一张少个角的图片，第二层就是那个二维码了，第三层，一张完整的背景图片，当然，第一第三层的图片是一样的，可自定义的。貌似有点靠谱的样子

so 目前问题就转移到怎么让第一层少个角  这里就要引出本片的猪脚----  clip-path (终于出现了)

clip-path 是css的属性，意思是剪切路径，顾名思义就是按照一定的路径剪切

实际的原理就是通过overflow：hidden 的方式将剪切以外的部分隐藏掉，兼容性呢只能说还行，IE和Edge直接不支持，下面主要说说怎么用

  /* 引用一个内联的 SVG <clipPath> 路径*/
  clip-path: url(); 

  /* 引用一个外部的 SVG  路径*/
  clip-path: url();

  /* 多边形 */
  clip-path: polygon();

  /* 圆形 */
  clip-path: circle();

  /* 椭圆 */
  clip-path: ellipse();

  /* inset-rectangle() 将会替代 inset() ? */
  /* rectangle() 有可能出现于 SVG 2 */

  /* 圆角 */
  clip-path: inset();

常用的就是剪切多边形，圆形和圆角这些了，括号里面的值就是坐标点，当然此坐标点就是我们css里面的坐标了，(0,0)点在左上角

使用图片剪切：

<clipPath id="clipping">
  <circle cx="150" cy="150" r="50" />
  <rect x="150" y="150" />
</clipPath>

顺便说一句，剪切之后显示的是剪切路径以内的图形，剪切路径以外的就消失了

神技如此，请笑纳