使用css直接写渐变，对于现在而言，应该属于比价简单的一件事了，在一定程度上，扁平化的设计趋势的出现，减少了使用渐变色的场景，但是并不影响我们逐渐的熟悉线性渐变Linear-gradient的写法。
更进一步的话，应该就是斑马线的实现了，只要多谢几遍，其实也没什么难度。
最近在学习《css揭秘》，里面关于linear-gradient的用法，真的让人有大开眼界的感觉。
在他讲解的切角效果的章节里面，扩展几个css图形变化。
1、单个切角
background: linear-gradient(-45deg, transparent 15px, #58a 0);
通过调整角度，可以做成不同角度的切脚效果，调整transparent后面的数字值，可以调整切角效果的大小。
2、两个切角
background: linear-gradient(-45deg, transparent 15px, #58a 0) right,
linear-gradient(45deg, transparent 15px, #58a 0) left;
background-size: 50% 100%;
background-repeat: no-repeat;
在超过一个切角的效果的时候，就需使用css3的background应用多层背景的特性来完成多重渐变，从而实现多个切角，并且要确保背景不得重复（background-repeat），划分每个背景图片的大小（background-size）。
下面实现的效果也还都属于简单效果，也是在不断重复渐变，并确认大小。
利用角度确定切角形成的角度大小，利用transparent后面的值，确定切角形成的形状大小，利用left,right, top, bottom确定切角在每一个切片区的位置。
这个也属于四个切角效果，唯一要点是把切角都放在一个角落里面，导致看起来就是个菱形的效果，如果将颜色改变一下，就是我们正常看见的一个正规的合乎视觉的菱形。
background: linear-gradient(-60deg, transparent 15px, #58a 0) top left,
linear-gradient(60deg, transparent 15px, #58a 0) top right,
linear-gradient(-120deg, transparent 15px, #58a 0) bottom left,
linear-gradient(120deg, transparent 15px, #58a 0) bottom right;
background-repeat: no-repeat;
background-size: 50% 50%;
background: linear-gradient(-60deg, transparent 15px, #58a 0) top left,
linear-gradient(60deg, transparent 15px, #58a 0) bottom left,
linear-gradient(-120deg, transparent 15px, #58a 0) top right,
linear-gradient(120deg, transparent 15px, #58a 0) bottom right;
background-repeat: no-repeat;
background-size: 50% 50%;
background: linear-gradient(-45deg, transparent 15px, #58a 0) top left,
linear-gradient(45deg, transparent 15px, #58a 0) top right,
linear-gradient(-90deg, transparent 10px, #58a 0) bottom left,
linear-gradient(90deg, transparent 10px, #58a 0) bottom right;
background-repeat: no-repeat;
background-size: 50% 50%;
内凹圆角的实现
background: radial-gradient(circle at top left, transparent 15px, #58a 0) top left,
radial-gradient(circle at top right, transparent 15px, #58a 0) top right,
radial-gradient(circle at bottom left, transparent 15px, #58a 0) bottom left,
radial-gradient(circle at bottom right, transparent 15px, #58a 0) bottom right;
background-repeat: no-repeat;
background-size: 50% 50%;
单个标签实现多个圆
background: radial-gradient(circle at center center, transparent 15px, #58a 0) top left,
radial-gradient(circle at center center, transparent 15px, #58a 0) top right,
radial-gradient(circle at center center, transparent 15px, #58a 0) bottom left,
radial-gradient(circle at center center, transparent 15px, #58a 0) bottom right;
background-repeat: no-repeat;
background-size: 50% 50%;
background: radial-gradient(circle at center right, transparent 15px, #58a 0) top left,
radial-gradient(circle at center left, transparent 15px, #58a 0) top right,
radial-gradient(circle at center left, transparent 15px, #58a 0) bottom left,
radial-gradient(circle at center right, transparent 15px, #58a 0) bottom right;
background-repeat: no-repeat;
background-size: 50% 50%;
不断实验的话，能够发现更多更好玩的形状。
补充一个线性渐变的使用场景，自定义文字下划线:
<p class="text-decoraion">在一定程度上，扁平化的设计趋势的出现，减少了使用渐变色的场景，但是并不影响我们逐渐的熟悉线性渐变Linear-gradient的写法。</p>
.text-decoration{
color: red;
line-height: 2;
background: linear-gradient(currentColor, currentColor) no-repeat 0 2.15em;
background-size: 40px 1px;
}
通过background-position的位置，定位下划线所在的位置，通过background-size的第一个值width设置下划线长度，第二个值height设置下划线粗细，可以很细粒度的控制下划线的长宽和位置。