今天给大家分享几个项目中用到的，纯CSS手搓的不规则图形效果，内附完整代码，有兴趣的盆友可以一起交流，个人总结，有问题望指出，我会改的~
方案一：直接切图
切图没什么好说的
方案二：SVG画一个
有蓝湖设计稿的话，直接导出svg格式
方案三：纯CSS手搓
结合各种属性配合，clip-path:polygon()、background: linear-gradient()等
举几个栗子，上图上代码...
整个背景的图形比较复杂，我们分两部分实现，一个是弯弯曲曲的线，一个是线上随着线条纹理的出现的渐变色，为了不增加不必要的元素，所以我打算用两个伪元素来实现。
首先我们来实现弯弯曲曲的线条，仔细看这条线，你会发现这条线的中间也是有个渐变色的，所以我的想法是先用clip-path:polygon()裁剪出这条线的形状，然后在背景里实现渐变色。
核心代码如下：
css
header::after {
......
background: linear-gradient(90deg, transparent 0, #42a7f5 45%, #42a7f5 55%, transparent 100%);
clip-path: polygon(0 30%, 21% 30%, 25% 98%, 45% 98%, 47% 90%, 53% 90%, 55% 98%,75% 98%, 79% 30%, 100% 30%,
100% 27%, 79% 27%, 75% 95%, 55% 95%, 53% 87%, 47% 87%, 45% 95%,25% 95%,21% 27%, 0 27%);
}然后再看线条上的渐变色，这个渐变色也是随着线条的边缘有个裁剪，所以同样是clip-path:polygon()配合background: linear-gradient()来实现，核心代码如下：
css
header::before {
......
background: linear-gradient(45deg, transparent 0, transparent 30%, #122241 30%, #122241 calc(30% + 5px), transparent calc(30% + 5px), transparent 50%, #282c3e 50%, #282c3e calc(50% + 5px), transparent calc(50% + 5px), transparent calc(50% + 5px), transparent 70%, #193653 70%, #193653 calc(70% + 5px), transparent calc(70% + 5px), transparent) no-repeat,
linear-gradient(-45deg, transparent 0, transparent 30%, #122241 30%, #122241 calc(30% + 5px), transparent calc(30% + 5px), transparent 50%, #282c3e 50%, #282c3e calc(50% + 5px), transparent calc(50% + 5px), transparent calc(50% + 5px), transparent 70%, #193653 70%, #193653 calc(70% + 5px), transparent calc(70% + 5px), transparent) no-repeat,
linear-gradient(0, #1d4b81, transparent 85%);
background-size: 50px 10px, 50px 10px, 100% 100%;
background-position: 23% 10%, 77% 10%, 0 0;
clip-path: polygon(0 0, 0 30%, 21% 30%, 25% 98%, 45% 98%, 47% 90%, 53% 90%, 55% 98%,75% 98%, 79% 30%, 100% 30%, 100% 0%);
}实现一个五边形的方法有好几种，排除用Canvas、SVG画一个的方法，使用纯css，可以用clip-path:polygon(), 或background: linear-gradient()，或border等属性配合完成。
观察示例，这个背景不仅需要一个五边形，还得镂空，还需要随着边缘向内发散的内阴影。比较常见的阴影是属性是box-shadow,但是box-shadow是跟随和模型的边缘发散阴影，可以实现跟随图片边缘发散阴影部分的属性是filter: drop-shadow()，因此，我的方案是，用background: linear-gradient()画一个镂空的五边形背景，filter: drop-shadow()实现阴影部分，再用clip-path:polygon()裁剪一下超出五边形的阴影，由于filter: drop-shadow()的阴影会盖住元素内部内容，因此我用了一个伪元素来实现这个背景部分。
核心代码如下：
css
.pane-box1::after {
content: '';
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
background: linear-gradient(0deg, var(--start-color) 0, var(--start-color) 100%) no-repeat,
linear-gradient(0deg, var(--end-color) 0, var(--start-color) 100%) no-repeat,
linear-gradient(0deg, var(--end-color) 0, var(--start-color) 100%) no-repeat,
linear-gradient(0deg, var(--end-color) 0, var(--end-color) 100%) no-repeat,
linear-gradient(45deg, transparent, transparent 50%, var(--start-color) 50%, var(--start-color) calc(50% + 1px),
transparent calc(50% + 1px)) no-repeat;
background-size: calc(100% - 50px) 1px, 1px 100%, 1px calc(100% - 50px), 100% 1px, 50px 50px;
background-position: 0 0, 0 0, 100% 50px, 0 100%, 100% 0;
filter: drop-shadow(0 2px 3px var(--start-color)) drop-shadow(0 4px 4px var(--start-color))
drop-shadow(0 5px 5px var(--start-color)) drop-shadow(0 0 40px var(--start-color))
drop-shadow(0 0 100px var(--start-color));
clip-path: polygon(0 0, calc(100% - 48px) 0, calc(100% + 1px) 48px, calc(100% + 1px) calc(100% + 1px), 0 calc(100% + 1px));
}这个背景挺规则的，但是我觉得好看，一块在这总结了
看这个示例背景，有个有渐变色的圆角边框，圆角边框比较好实现，由于边框颜色不支持线性渐变，所以我就用一个伪元素做了渐变部分盖在了下边框，下边框上的发光部分就用另一个伪元素的box-shadow来实现，元素主背景就用线性渐变写一个斜条纹实现。
核心代码如下：
css
.pane-item {
......
background: repeating-linear-gradient(-45deg, #172e63, #172e63 2px, #0d255c 2px, #0d255c 4px);
border: 2px solid #368ee2;
box-sizing: border-box;
border-radius: 10px;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
......
}
.pane-item::before {
......
background: transparent;
box-shadow: 0 0 10px #b4e8ff, 0 0 30px #b4e8ff, 0 0 50px #b4e8ff;
......
}
.pane-box .pane-item::after {
......
background: linear-gradient(
90deg,
#368ee2 0,
#b4e8ff 45%,
#b4e8ff 55%,
#368ee2 100%
);
......
}写在最后
本文结束，希望对你有所帮助，轻喷~