一个css帮你完成文字切割酷炫效果！！！

一个css属性就可以带来一些好玩的效果，今天通过clip-path和mask两个属性快速实现上图的文字切割效果吧：

分析实现

看到上面的效果首先我们就会想到上下需要分成两部分，一部分上一部分下，然后对其定位重叠在一起再对其分别设置样式就可以实现这个效果了，但是问题是我们如何能让他左右是斜着重贴而不是我们传统的直线呢，这里我们就需要了解一个我们日常使用评率较低的属性了：

clip-path

clip-path 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。可以指定一些特定形状。

通过简短的介绍我们可以知道，其主要用于裁剪，我们可以通过其属性绘制出不同形状的div，这样我们再进行重贴就可以做出这种非常规矩形的布局了，我们看看这个属性的详细用法，其共有下面这多的用法

属性	具体作用
clip-source	用 URL 表示剪切元素的路径
basic-shape	将元素裁剪为基本形状：圆形、椭圆形、多边形或插图
margin-box	使用外边距框作为引用框
border-box	使用边框作为引用框
padding-box	使用内边距框作为引用框
content-box	使用内容框作为引用框
fill-box	使用对象边界框作为引用框
stroke-box	使用笔触边界框（stroke bounding box）作为引用框
view-box	使用最近的 SVG 视口（viewport）作为引用框。
none	这是默认设置。 没有剪辑
initial	设置属性为默认值。
inherit	属性值从父元素继承。

其中basic-shape属性的值有几种。polygon多边形、circle圆形、ellipse椭圆、inset等等，而我们当前只需要使用一个多边形就完成了上面的形状，他的用法是这样的

clip-path: polygon(x y, x y, x y)

很好看出他的参数就是一组一组的坐标xy点，00对应左上角原点，反之100%,100%对应右下角原点，我们只需要绘制四个点就可以达到上面的形状：

所以坐标也很好计算，

上面top的坐标是:clip-path: polygon(0% 0%, 100% 0%, 100% 48%, 0% 58%);

下面bottom坐标:clip-path: polygon(0% 60%, 100% 50%, 100% 100%, 0% 100%);

通过两个点即可轻松绘制出我们最开始的效果了。

渐变色

我们可以给文字来点渐变色让上面效果更好看点,要想实现文字渐变有两种方式

第一种

background-image: linear-gradient(to right, red, blue);
-webkit-background-clip: text;
color: transparent;

通过给文字透明，再给背景background-image设置渐变色，最后需要使用

-webkit-background-clip取值为text的意思，就是以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。这个属性目前来看兼容性还比较有限，很多地方还不能使用。

来看看第二种实现

<h1 text="渐变色文字">渐变色文字</h1>

h1{
  position: relative;
  color: yellow;
}
h1:before{
  content: attr(text);
  position: absolute;
  z-index: 10;
  color:pink;
  -webkit-mask:linear-gradient(to left, red, transparent );
}

我们通过对* :before* 选择器向选定的元素 前 插入内容。 使用content 属性来指定要插入的内容。**attr(text)**就是我们绑定的属性，

主要是通过mask属性，mask其实就是一个遮罩层，在ps中我们称之为蒙版，可以挡住一部分内容,其属性值也非常多

/* Keyword values */
mask: none;

/* Image values */
mask: url(mask.png);                       /* 使用位图来做遮罩 */
mask: url(masks.svg#star);                 /* 使用 SVG 图形中的形状来做遮罩 */

/* Combined values */
mask: url(masks.svg#star) luminance;       /* Element within SVG graphic used as luminance mask */
mask: url(masks.svg#star) 40px 20px;       /* 使用 SVG 图形中的形状来做遮罩并设定它的位置：离上边缘 40px，离左边缘 20px */
mask: url(masks.svg#star) 0 0/50px 50px;   /* 使用 SVG 图形中的形状来做遮罩并设定它的位置和大小：长宽都是 50px */
mask: url(masks.svg#star) repeat-x;        /* Element within SVG graphic used as horizontally repeated mask */
mask: url(masks.svg#star) stroke-box;      /* Element within SVG graphic used as mask extending to the box enclosed by the stroke */
mask: url(masks.svg#star) exclude;         /* Element within SVG graphic used as mask and combined with background using non-overlapping parts */

/* Global values */
mask: inherit;
mask: initial;
mask: unset;

这是实现字体渐变的两种形式，通过这些css知识的混合，我们就可以做出上图的切割效果了，当然这两个属性本身就很强大，还可以做各种好玩的事情，其也可以做各类异形div，这些都可以实现。

在线体验

当然了，这只是很小一个demo，更多的玩法期待你的组合