[分享]css不规则图形框渐变

CSS不规则图形框渐变是一种美观且实用的网页设计技术，可以让你的网页看起来更加生动和吸引人。

 .shape{
        width: 200px;
        height: 100px;
        background: linear-gradient(135deg, #3c415e 25%, #cac9c9 25%) -50px 0, 
        linear-gradient(225deg, #3c415e 25%, #cac9c9 25%) 50px 0,
        linear-gradient(315deg, #3c415e 25%, #cac9c9 25%) 150px 0,
        linear-gradient(45deg, #3c415e 25%, #cac9c9 25%);
        background-size: 100px 100px;
        background-repeat: no-repeat;
    } 

在上面的代码中，我们使用了四个不同角度的线性渐变并使用不同的偏移位置（background）来创建这个不规则的图形框。我们还使用了background-size和background-repeat来调整它的大小和重复。

你可以根据你的需要和创意使用CSS不规则图形框渐变来设计你自己的网页元素。