CSS中的渐变，border画三角

渐变：

Linear Gradients线性渐变

  background-image: linear-gradient(to right, red , yellow);

background-image: linear-gradient(-90deg, red, yellow);如果你想要在渐变的方向上做更多的控制，你可以定义一个角度，而不用预定义方向（to bottom、to top、to right、to left、to bottom right，等等）。

background-image: linear-gradient(-90deg, red, yellow);

Radial Gradients径向渐变

background-image: radial-gradient(red, yellow, green);

颜色节点不均匀分布

background-image: radial-gradient(red 5%, yellow 15%, green 60%);

设置形状：

background-image: radial-gradient(circle, red, yellow, green);

画三角形

三角形实现原理：

其实border是由四条边框构成的，平时我们把宽度设置的很小，但其实我们如果把内容删去，把border的宽度放大，会发现形成了四个三角形

#triangle-up {
			    width: 0;
			    height: 0;
					border: 40px solid;
					border-color: orange blue red green;
			}

所以只需要把左右的边框的颜色设置为透明，不设置顶上的边框，就可以是三角形了

例：上三角

#triangle-up {
			    width: 0;
			    height: 0;
					border-left: 50px solid transparent;
					border-right: 50px solid transparent;
					border-bottom: 100px solid aliceblue;
			}

本文地址：https://blog.csdn.net/qq_43005779/article/details/107219133