没看《css揭秘》之前，我一般就会这样使用liner-gradient(top, #000, #fff)/liner-gradient(45deg, #000, #fff);

我相信很多同事对gradient认知也是到这里，网上普遍也是这样介绍！

正常的情况下：liner-gradient(pink,#fff)在div盒子中是自上而下渐变,如下图：
`
.second{margin: 20px auto;width: 400px;height: 100px;background: linear-gradient(pink, #ffffff)}
`

接下来就是神奇的地方了！在此我再着重推荐一下《css揭秘》[LEA VEROU著]，大家可以看看

先解读一下下面的第一行代码：

background: linear-gradient(-135deg, transparent 71px, #20B2AA 0) ；

background-size: 100% 100%;(这行代码也很重要，为下面的样式做铺垫,这个代码不清楚的赶紧去w3c看）

background-repeat: no-repeat

首先大家都能理解：

第一个参数：线性渐变方向,

第二个参数：切角深度，（等下看展示效果再解析）

第三个参数： 就是渐变颜色，如果（#20B2AA 0）后面不加0的话，默认情况下从#20B2AA渐变到#ffffff,所以用0代替，取消颜色渐变

如图所示：（一些其他样式的代码就没写上去了，主要理解上面的三行代码就行了）

那个箭头长度就是所谓的深度，也就是所谓的三角形斜角边的高！（这个大家默认大家都会的啊）

有时候我们需要这样的样式：

这就要牵扯到background-size以及 liner-gradient() top left(指定左上角)

                                             `liner-gradient() top right`(指定右上角)

                                            ` liner-gradient() bottom left`(指定左下角)

                                             `liner-gradient() bottom right`(制定右下角)

我们都知道，再怎么颜色渐变都是平铺过来的

那我们就可以指定 平铺的大小！即通过（backround-size）

第一个角：就是左上角 且 平铺的大小是1/4的div大小，那么大小水平和竖直方向就是各50%，

同理：其他三个角平铺的大小都是一样的。即

background-size(50% , 50%)

第一个角平铺：

background:liner-gradient(135deg, transparent 15px, pink 0) top left,(1)

第二个角平铺：

background:liner-gradient(-135deg, transparent 15px ,pink 0) top right (2)

第三个角平铺：

background:liner-gradient(-45deg, transparent 15px ,pink 0) bottom right (3)

第四个角平铺：

background:liner-gradient(45deg, transparent 15px ,pink 0) bottom left (4)

总和代码：

background: linear-gradient(135deg, transparent 15px, pink 0) top left,

           linear-gradient(-135deg, transparent 15px, pink 0) top right,

           linear-gradient(-45deg, transparent 15px, pink 0) bottom right,

           linear-gradient(45deg, transparent 15px, pink 0) bottom left;

background-size: 50% 50%;

background-repeat: no-repeat;

接下来自己尝试下面的图形：

 box-sizing: border-box;margin: 10px auto;width: 120px;height: 40px;line-height: 40px;

 text-align: center;padding-right: 20px;

 background: linear-gradient(-135deg, transparent 14px, pink 0) top right,

                    linear-gradient(-45deg, transparent 14px, pink 0) bottom right;

 background-size: 100% 50%;

 background-repeat: no-repeat;

转载或引用本网版权所有之内容须注明“转自（或引自）云栖社区”字样，并标明本网网址yq.aliyun.com

谢谢大家，获取更多精华技术IT资讯，请持续关注云栖社区“达摩老祖”and"码上有钱"

需要购买阿里云各种产品，点击文字链领取阿里云通用打折劵