使用css绘制图形

在前端性能优化中，资源的加载对页面性能有很是大的影响，如何减小资源的加载，特别是图片的加载我以为是每一位前端都须要去研究的内容。

以最近开发的一个页面为例，分享一下用css绘制图片，从而减小图片资源的加载。

红框所示就是页面使用css绘制的图形，若是以为对如何绘制有疑问，不妨就参考一下。

内凹半圆形

内凹所在模块的背景部分有渐变色和一张图片，可使用css3的background设置多个背景，须要提醒的是多背景图堆叠顺序是从后往前的。好比模块的背景图片是显示在渐变色上面，那么写法就是：

background: url('https://gw.alicdn.com/tfs/TB1Rk9mLMTqK1RjSZPhXXXfOFXa-208-109.png') right bottom,
    -webkit-linear-gradient(-45deg, red 15px, green 300px) top left;
复制代码

另外这个模块的需求是除了须要画出两个内凹半圆形之外，还须要作镂空处理，透出页面的背景图内容。我这里是使用了css3的mask属性，mask属性的写法跟background的很相似，这里就不作详细介绍。

其中mask-image是经过属性值里图片的透明度来控制指定区域的显示和隐藏，透明度为0隐藏，1位显示。因此只须要绘制出想要的形状并设置透明度为0，就能够实现镂空的效果。

-webkit-mask-image: 
	-webkit-radial-gradient(center left, rgba(0,0,0,0) 10px, rgba(0,0,0,1) 10px),
    -webkit-radial-gradient(center right, rgba(0,0,0,0) 10px, rgba(0,0,0,1) 10px);
    -webkit-mask-size: 200px 400px, 200px 400px;
    -webkit-mask-position: left, right;
    -webkit-mask-repeat: no-repeat;
复制代码

查看实例效果和源代码

经过渐变和background的组合能够实现不少好玩的效果，模块中的那一行锯齿也是经过的backgorund+渐变实现的。

渐变箭头

用css绘制箭头仍是比较简单，就是利用两个子元素作正负45度的旋转就能够了，再设置背景渐变就能画出视觉稿的效果。再配合css3的animation，一个渐变箭头的动画就作出来了。

查看实例效果和源代码

除了可使用css本身画之外，也可使用iconfont的图标，我这里的箭头还须要有渐变，而标准库中只有纯色的箭头图标，不过还好css3中提供了background-clip,能够将元素背景色裁剪成文字(iconfont的图标也是文本)的前景色。

.arrows{
  background-image: linear-gradient(90deg, #FCCC98, #D69851);
  -webkit-background-clip: text;
  background-clip: text;
  font-size: 15px;
  line-height: 15px;
  -webkit-text-fill-color: transparent;}
复制代码

查看实例源代码

波浪线

绘制波浪线个人第一反应是用SVG或者canvas的贝塞尔曲线，使用canvas就来画个波浪线成本稍微有点高。使用SVG本身手写的话成本也比较高，但若是视觉同窗用的是Sketch作的视觉稿，那只须要导出SVG代码就能够了。

SVG绘制的波浪线实例及源代码

除了可使用SVG，也能够利用css的border属性来模拟弧线。由于border能够给某一条边框设置圆角，视觉效果就像是一条弧线，经过元素组合就能够实现波浪线的效果。

.mask-curve{
    width: 50px;
    height: 100px;
    background-color: #D6954E;
    box-sizing: border-box;
    border-bottom-right-radius: 100%;
    position: absolute;
    left: 0;
    top: 0;
  }
复制代码

border绘制的波浪线实例及代码

小结

目前的css功能越来也丰富，可使用css替换不少的之前须要图片才能完成的效果，从而减小图片的加载，达到优化页面性能的目的。上面的实现也只是我的的想法，若是有更好的方案欢迎交流。