CSS background image gradient, arbitrary corner cutting

rendering

1. Implement background color gradient

background: linear-gradient(#F99A17, #EE5234, #F72C20);

Gradient color from top to bottom

background: linear-gradient(-90deg, #F99A17, #EE5234, #F72C20);

Gradient color from left to right

radial-gradient(red, green, yellow);

Gradient color from inside to outside

2. Achieve rounded background corners

border-radius: 50%;

border-radius: 30rpx, 20rpx, 10rpx, 10rpx

Can set four corners rounded corners

3. Achieve arbitrary background Angle cutting

clip-path: polygon(30rpx 0, 100% 0, 100% 100%, 30rpx 100%, 0 50%);

The argument is the coordinate of each point (x,y)

The code is as follows:

.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%);
}

Copy the code