使用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替換不少的之前須要圖片才能完成的效果，從而減小圖片的加載，達到優化頁面性能的目的。上面的實現也只是我的的想法，若是有更好的方案歡迎交流。