小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

绘制

在项目中我们会经常遇到这样一个需求：一个长条，背景色有两种，然后中间有一块的颜色是斜三角形。这个需求我们可以用linear-gradient来解决。

容器

<div class="tilt"></div>

绘制颜色倾斜条我们准备一个div元素足以，接下来就是它的变身时刻。

样式

我们需要给容器一个渐变，但是需要倾斜的地方我们给它空出来。当然我们也可以不用留白，只需要倾斜颜色部分把它覆盖掉就好。

长条

我们再写长条的时候会定义一些参数，以便对它的修改，如下：

• --w：长条的宽

• --h：长条的高

• --tw：颜色倾斜的宽

• --c1：需要的第一种颜色

• --c2：需要的第二种颜色

• --p1：留白或者颜色倾斜的开始位置

• --p2：留白或者颜色倾斜的结束位置

.tilt {
    --w: 100%;
    --h: 60px;
    --tw: 60px;
    --c1: red;
    --c2: blue;
    --p1: calc(50% - var(--tw) * 0.5);
    --p2: calc(50% + var(--tw) * 0.5);
    width: var(--w);
    height: var(--h);
    /* 这一种是中间留白的 */
    background:linear-gradient(to right, var(--c1) var(--p1), transparent var(--p1), transparent var(--p2), var(--c2) var(--p2));
    /* 或 这一种是中间无留白的 */
    background:linear-gradient(to right, var(--c1) var(--p1), var(--c2) var(--p2));
    position: relative;
}

为了方便理解颜色倾斜的位置，我这里使用的是中间留白的样式，但是这个样式有个bug，当--tw为奇数的时候，整体会有空白缝隙，所以实际开发中建议使用中间无空白的。

颜色倾斜

利用伪元素来实现这个效果，如下：

.tilt::before{
    content: '';
    position: absolute;
    left: var(--p1);
    width: var(--tw);
    height: 100%;
    background:linear-gradient(to right bottom, var(--c1) 50%,  var(--c2) 50%);
}

颜色倾斜条

这个样式在开发中我们会经常使用到，大家可以尝试使用。当然，实现这个效果有很多方式，比如：倾斜部分我们可以利用三角形来实现。

总结

如果使用中间留白的方式，要注意它的bug。实现这个效果的方式有很多，你如果有其它的实现方式，欢迎留言。

想了解其他动画效果，请前往《有趣的动画》 专栏，希望对你有所帮助。