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

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

一、 x 的繪制

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

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

假設(shè) HTML 結(jié)構(gòu)是這樣，一個(gè)x元素。

<x></x>

用字號(hào)來控制尺寸大小。

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

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

用代碼實(shí)現(xiàn)就是。

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

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

用同樣的方式繪制另一個(gè)方向上的。

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

這樣就得到一個(gè)“x”。

二、鏤空的實(shí)現(xiàn)

提到鏤空，你應(yīng)該想到 CSS mask[1]。

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

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

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

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

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

用代碼實(shí)現(xiàn)就是。

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;
}

這樣就實(shí)現(xiàn)了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]

三、總結(jié)一下

非常簡單、非常輕松的一篇分享，相信可以給大家?guī)硪恍﹩l(fā)，下面總結(jié)一下繪制要點(diǎn)：

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

當(dāng)然實(shí)際的 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。