使用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替换很多的以前需要图片才能完成的效果，从而减少图片的加载，达到优化页面性能的目的。上面的实现也只是个人的想法，如果有更好的方案欢迎交流。

转载于:https://juejin.im/post/5c88c706f265da2d9263230e