如图,
下方显示为两个梯形。
代码如下:
<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);
更多推荐
2020-11-16 css使用颜色渐变绘制梯形
发布评论