2020-11-16 css使用颜色渐变绘制梯形

如图，

下方显示为两个梯形。

代码如下：

<div class"element"></div>

<style>
 		.element{
 			 border: 1px solid red;
 			 width: 160px;
   			 height: 22px;
 			 background:linear-gradient(110deg,red 80px,white 0);
 		}
</style>

效果如图

实现的重点在于最后一行渐变代码：

background:linear-gradient(110deg,red 80px,white 0);

菜鸟教程中的释义如下：

/* 从下到上，到高度40%位置蓝色渐变开始、最后以红色结束 */
linear-gradient(0deg, blue 40%, red);

意为在40%前蓝色都不发生改变。此处高度可以使用百分比也可以使用具体数值。
设蓝色渐变数值为x，红色为y。
若控制红色渐变数值为 0~y ** (y<=x，且x小于等于其盒子div宽度或高度（具体视情况而定）)**，则意味着红色在蓝色产生渐变前就已结束渐变。这样就可以产生两个矩形。控制x的值便可以控制蓝色矩形的宽度。

若改变角度，则可以产生梯形。

linear-gradient(120deg, blue 40%, red 0);

linear-gradient(120deg, blue 70%, red 0);

linear-gradient(30deg, blue 40%, red 0);