今天学习了一个神奇属性--剪切路径。故名思义通过剪切路径的方式获得显示区，剪切路径之外的则隐藏。有了它，任何形状都能通过一行样式解决掉，简直不要太爽。
clip-path学习
clip-path属性，总共分为'clip-source'、'basic-shape'、'geometry-box'、'none'四个值。clip-source的意思就是配置url来源，例如: url('your-svg.svg#url')。base-shape属性就相对常用的多，并且支持的数值也有五个之多，这五个分别对应五种形状。矩形：inset、多边形：polygon、圆型：circle、椭圆形：ellipse、以及任意形状：path。实战部分将使用这个值，给大家分别展示几个常用图形的实现。然后，再说下geomertry-box的作用。它主要是修改参考框，并且在未配置时候border-box将作为参考框。最后就是none了，它的意思就是不配置剪切路径。
clip-path场景
本质上剪切路径所解决的场景只有二种，那就是切图像、画图形。实际上，切图对我们研发而言意义不大，毕竟如果有这样需求的时候，通常ui同学就会给到成品图，无需再次切割。但第二项对我们而言就太重要了，因为经常会有写样式的需求，或者通过三角形指向当前操作节点，又或者叉号的样式修改。以此种种数不胜数。相信大家从业以来或多或少都写过一些图形，而且今后也会写更多。希望看完本文，用它来承包你未来所有绘图形的需求。
实战
三角形：
clip-path: polygon(`50% 0%`, `0% 100%`, `100% 100%`);
矩形：
clip-path: polygon(`0 0`, `100% 0`, `100% 100%`, `0% 100%`);
十边形：
clip-path: polygon(`50% 0%`, `80% 10%`, `100% 35%`, `100% 70%`, `80% 90%`, `50% 100%`, `20% 90%`, `0% 70%`, `0% 35%`, `20% 10%`);
圆形：
clip-path: circle(`50%` at `50% 50%`);
椭圆形：
clip-path: ellipse(`28%` `43%` at `50% 50%`);
结束语
真的是太好用了，恕篇限制不能给大家一一列举，但是只要大家有图形需求，请一定不要忘记这个特性。以前我无能为力，今后愿以此招祝大家一臂之力，帮大家减少绘图形的烦恼和忧愁。关注、点赞、评论是对我最大的鼓励，在此感谢大家一路相伴。
宝剑锋从磨砺出，梅花香自苦寒来。
