开始之前先感受一下 这样的图形
html 中实现这样的效果需要用到 clip path， 对于图形的具体点位可以在如下的网站生成直接添加到页面就可以了
地址1 地址2
OK，直接上代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .svg { position: absolute; width: 0; height: 0; } .clipped { width: 264px; height: 213px; background: turquoise url(https://img-blog.csdnimg.cn/20200902163552642.png); background-size: cover; -webkit-clip-path: url(#my-clip-path); clip-path: url(#my-clip-path); } </style> </head> <body style="background: blue;"> <div style="position: relative; height: 300px;"> <img class="cloud" src="img/cloud.png" style=" z-index: 2; position: absolute;"/> <img class="bg" src="img/0.jpg" style="width: 264px; height: 213px; position: absolute; clip-path: polygon(46% 20%, 50% 22%, 52% 23%, 54% 26%, 56% 29%, 61% 28%, 64% 29%, 68% 28%, 71% 29%, 73% 28%, 70% 30%, 72% 37%, 75% 39%, 75% 46%, 84% 44%, 86% 46%, 89% 46%, 91% 47%, 94% 49%, 94% 51%, 95% 53%, 93% 54%, 93% 58%, 93% 62%, 91% 66%, 90% 69%, 90% 72%, 89% 72%, 87% 72%, 84% 73%, 82% 75%, 72% 73%, 71% 75%, 75% 78%, 73% 79%, 72% 79%, 69% 84%, 68% 81%, 65% 87%, 63% 87%, 58% 87%, 56% 87%, 53% 87%, 48% 86%, 44% 86%, 42% 87%, 39% 87%, 37% 87%, 33% 87%, 31% 86%, 28% 84%, 27% 83%, 26% 82%, 22% 81%, 16% 80%, 13% 71%, 16% 64%, 14% 58%, 18% 60%, 16% 58%, 58% 59%, 10% 64%, 20% 47%, 13% 48%, 31% 45%, 22% 48%, 30% 45%, 25% 48%, 30% 37%, 29% 32%, 28% 28%, 32% 24%, 34% 22%, 38% 21%, 42% 19%);"/> <!-- <div style="line-height: 213px; z-index:3 ; position: absolute;" >添加图片</div> --> </div> <img src="img/0.jpg" style="clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%) ;" /> <img src="img/0.jpg" style="clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%) ;" /> <img src="img/0.jpg" style="clip-path: circle(20%) ;" /> <img src="img/0.jpg" style="clip-path: ellipse(130px 140px at 10% 20%);;" /> </body> </html>
