css线性渐变切角

线性渐变

相邻两个区域百分比的差就是这两个颜色渐变过渡的面积占比。（90-末尾100% 是混合颜色）

不写该是百分比多少还是多少,末尾不写当成100%，开头不写当成0%

写成0就当成0%,比前面小,显示单个颜色

如果前面已经是40%了，后面是30%，则比前面小,显示单个颜色

		#app {
				width: 200px;
				height: 100px;
				background: linear-gradient(to top right, yellow 50%, green 100%);
				/* 0-50%yellow 50%-100%混合           100%*/
				
				background: linear-gradient(to top right, yellow 50%, green);
				/* 0-50%yellow 50%-100%混合           不写该是百分比多少还是多少 100%*/
				
				background: linear-gradient(to top right, yellow 50%, green 0);
				/* 0-50%yellow 50%-100%green         写成0就当成0%,比前面小,显示单个颜色*/
				
				background: linear-gradient(to top right, yellow 50%, green 40%);
				/* 0-50%yellow 50%-100%green         比前面小,显示单个颜色*/

				background: linear-gradient(red 10%, green 85%, blue 90%);
				/* 0%-10%red 10%-95%混合 85%-90%混合 90-100%blue */

				background: linear-gradient(red 0%, green 50%, blue 100%);
				background: linear-gradient(red, green 50%, blue 100%);
				/* 0%-50%混合 50%-100%混合  三个颜色均匀分布的样子,红色到绿色的渐变占50%,绿色到蓝色的渐变占100%. */

				background: linear-gradient(red 0%, green 50%, blue 10%);
				/* 0%-50%红绿混合 50%-100%blue   后面比50%小,显示单个颜色*/

				background: linear-gradient(red 0%, green 50%, blue 0);
				/* 0%-50%红绿混合 50%-100%blue  后面是0%比50%小,显示单个颜色*/

				background: linear-gradient(red, green 50%, blue 0);
				/* 0%-50%红绿混合 50%-100%blue  后面是0%比50%小,,显示单个颜色*/
				
				background: linear-gradient(red 0, green 50%, blue 0);
				/* 如果有0表示0% */
			}

background: linear-gradient(45deg,#feac5e,#c779d0,#4bc0c8);

rgba 使用了 0.5 的透明度。
background: linear-gradient(45deg,rgba(254,172,94,0.5),rgba(199,121,208,0.5),rgba(75,192,200,0.5));

用百分比指定起始颜色的位置，默认值为 0%
background: linear-gradient(45deg,#d3959b 20%,#bfe6ba);

background: linear-gradient(to top right, yellow 50%, green 0);
/* 注意: 起始颜色的位置是从它自身所占的位置开始计算的, 第一个占了50%, 那第二个的 0 就是从50%开始 */

切角

哪里要切，就把这个放在那个div中就行了

background: linear-gradient(135deg, transparent 0, #143872 0) top left,
			linear-gradient(-135deg, transparent 10px, #143872 0) top right,
			linear-gradient(-45deg, transparent 10px, #143872 0) bottom right,
			linear-gradient(45deg, transparent 10px, #143872 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;

参考 https://blog.csdn.net/qzw752890913/article/details/108431234