1、渐变
从上到下:background-image: linear-gradient(to bottom, red, yellow);
线性:background-image: linear-gradient(to bottom right, red, yellow);
径向:background-image: radial-gradient(red 5%, yellow 15%, green 60%);
角度:background-image: linear-gradient(-90deg, red, yellow);
2、三角形
{
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
{
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}
{
width: 50px;
height: 50px;
border-top: 2px solid #7de87d;
border-right: 2px solid #7de87d;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}