CSS实现背景图渐变⾊,任意切⾓效果图
1、实现背景颜⾊渐变
background: linear-gradient(#F99A17, #EE5234, #F72C20);
从上到下渐变颜⾊
background: linear-gradient(-90deg, #F99A17, #EE5234, #F72C20);
从左到右渐变颜⾊
渐变颜代码大全radial-gradient(red, green, yellow);
从⾥到外渐变颜⾊
2、实现背景圆⾓
border-radius: 50%;
border-radius: 30rpx, 20rpx, 10rpx, 10rpx
可以设置四⾓圆⾓
3、实现背景任意切⾓
clip-path: polygon(30rpx 0, 100% 0, 100% 100%, 30rpx 100%, 0 50%);
参数是每个点的坐标(x,y)
代码如下:
.arrow {
position: absolute;
top: 683rpx;
left: 262rpx;
width: 356rpx;
height: 65rpx;
background: linear-gradient(-90deg, #F99A17, #EE5234, #F72C20);
background-repeat: no-repeat;
clip-path: polygon(30rpx 0, 100% 0, 100% 100%, 30rpx 100%, 0 50%);
}