大家可能知道,不久前 twitter 换了一个新 logo,从蓝色小鸟变成了一个 “x”,如下不聊其他的,看看如何用 CSS 渐变来绘制这样一个图形一、 x 的绘制整个 logo 是一个镂空的“x”形状,先不考虑镂空部分,如何绘制实心的“x”呢渐变有 3 种,线性渐变、径向渐变和锥形渐变。很显然,x 可以看成是两端倾斜的线段,用线性渐变就足够了。假设 HTML 结构是这样,一个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;
...
继续阅读
(124)