大家可能知道，不久前 twitter 換了一個新 logo，從藍色小鳥變成了一個 “x”，如下

不聊其他的，看看如何用 CSS 漸變來繪制這樣一個圖形。

一、 x 的繪制

整個 logo 是一個鏤空的“x”形狀，先不考慮鏤空部分，如何繪制實心的“x”呢？

漸變有 3 種，線性漸變、徑向漸變和錐形漸變。很顯然，x 可以看成是兩端傾斜的線段，用線性漸變就足夠了。

假設 HTML 結構是這樣，一個x元素。

<x></x>

用字號來控制尺寸大小。

x{
  display: inline-block;
  font-size: 200px;
  width: 1em;
  height: 1em;
}

然后通過線性漸變繪制一條斜線，其實就是透明→純色→透明的漸變，注意這里的角度關系，示意如下：

用代碼實現就是。

x{
  /**/
  background: linear-gradient(-52deg, #0000 50%, currentColor 0 55%,#0000 0);
}

可以得到一條傾斜的線段。

用同樣的方式繪制另一個方向上的。

x{
  /**/
  background: linear-gradient(-52deg, #0000 50%, currentColor 0 55%,#0000 0),
    linear-gradient(52deg, #0000 44%, currentColor 0 56%,#0000;
}

這樣就得到一個“x”。

二、鏤空的實現

提到鏤空，你應該想到 CSS mask[1]。

遮罩的原理很簡單，在遮罩圖像下，只顯示不透明的部分，透明的部分會被裁剪，半透明以此類推，示意如下：

在這里，由于只需要挖空一小部分，所以這部分是透明的，而其他部分都是不透明的，示意如下：

那么問題來了，如何繪制這樣一個遮罩圖呢？

這種情況下，應該反過來思考，里面的斜線和前面的線性漸變基本一致，只是這部分現在是鏤空的。因此，這里需要用到遮罩合成：mask-composite[2]，和設計軟件中的圖形運算非常相似。

所以，上面的遮罩圖形可以拆分為以下兩個部分。

用代碼實現就是。

x{
  /**/
  -webkit-mask: linear-gradient(red 0 0),
        linear-gradient(52deg, #0000 48%, red 0 52%,#0000 0) 0/100% 90% no-repeat;
  -webkit-mask-composite: xor;
}

這樣就實現了twitter的新logo。

由于背景色是跟隨文字顏色的，所以更換 logo 顏色也非常方便。

x{
  color: royalblue
}

效果如下：

完整代碼如下（不到10行）。

x{
  display: inline-block;
  font-size: 200px;
  width: 1em;
  height: 1em;
  background: 
    linear-gradient(52deg, #0000 44%, currentColor 0 56%,#0000 0),
    linear-gradient(-52deg, #0000 50%, currentColor 0 55%,#0000 0);
  -webkit-mask: linear-gradient(red 0 0),
    linear-gradient(52deg, #0000 48%, red 0 52%,#0000 0) 0/100% 90% no-repeat;
  -webkit-mask-composite: xor;
}

你也可以訪問以下在線鏈接：

• CSS twitter (juejin.cn)[3]
• CSS twitter (codepen.io)[4]

三、總結一下

非常簡單、非常輕松的一篇分享，相信可以給大家帶來一些啟發，下面總結一下繪制要點：

• 復雜的圖像先拆解，先實現簡單的部分。
• x 可以看成是兩端傾斜的線段，用線性漸變繪制即可。
• 看到鏤空，應該想到 CSS 中的遮罩。
• 有些反向遮罩不好實現，可以考慮用遮罩合成，和設計中的圖形運算非常相似。
• CSS實現的好處是可以隨意更換顏色。

當然實際的 logo 不可能用這種方式去繪制啦~這里只是提供一種 CSS 思路，鍛煉一下 CSS 繪制的能力。

[1]CSS mask： https://developer.mozilla.org/en-US/docs/Web/CSS/mask-image。

[2]mask-composite： https://developer.mozilla.org/en-US/docs/Web/CSS/mask-composite。

[3]CSS twitter (juejin.cn)： https://code.juejin.cn/pen/7271283256816271421。

[4]CSS twitter (codepen.io)： https://codepen.io/xboxyan/pen/vYvNVaB。