不规则边框裁剪div宽高等比缩放

，直接上案例，某高端设计师设计了一个一款让前端头疼的活动页面。如图：

波浪线不可以动

为了让前端开发更清楚的理解。

素材拆分

案例分析：

设计给的轮播图是矩形，波浪线是一个png，gif就是gif。

需求是，轮播图不可以出现在波浪线下方，gif不可以出现在波浪线上方。

前提条件是我们不可以做一个这样的gif，设计师是不会提供给我的。

不提供不规则边框透明背景的gif

所以，我们的png波浪线，永远在轮播图和fig图之上。

如果轮播在gif图之上：

错误1：轮播过程，轮播图没有被遮住

如果gif在轮播图之下：

错误2：fig若在轮播之上，移动的时候超过了波浪线

解决方案：

从div的概念来考虑，我们的浪线.png只能跟一个元素在一起，就假设浪线.png和那个gif图在一起吧。他俩组成了一个不规则边框的div。

第一步：不规则裁剪div——-webkit-clip-path: polygon()属性。

我们知道，-webkit-clip-path可以用来裁剪div，使他成为一个不规则边框的不安分的div。

白色区域是被 -webkit-clip-path 裁剪的不规则边框的div

原理分析：

裁剪出不规则div，用浪线png盖住就可以实现了

具体实现：

DOM元素，注意看注释

使出吃奶的力气计算出了-webkit-clip-path各点的坐标。

css代码部分

结果+bug：

初步结果

看似很完美，图片的轮播和gif跳动互不影响，实际上有一个致命的bug就是我的-webkit-clip-path里面单位是以px来设置的，如果窗口大小改变了，浪线图的宽高等比缩放了，但是切割的坐标点还是px~

视口改变，对应不上

解决方法：

改为百分比布局，-webkit-clip-path切割里面的坐标都以%为单位。

前提条件是：如果窗口发生了变化，这个div的宽高比例永远是一致的。

要求div宽高比例一致

css实现div宽高等比缩放：

使用padding-top或者padding-bottom来实现div随着窗口变化宽高等比缩放。

原理：把div高度设置为0，padding-top是相对于div高度，比如，div宽度是400px，那么他的padding-top就是200px;

所以，padding-top来撑开这个div

width: 100%;

height: 0px;

padding-top: 26%;

将div设为等比缩放，再把单位都改成百分比。按照一个尺寸来调试，昨晚之后，就可以兼容不同尺寸了，修改如下：

都设置为百分比

效果对比：

1679px宽度屏幕显示 1151px 宽度屏幕显示

完美解决了GIF动画和轮播图动画互不干扰。

如有更好方法请私信我，跪谢~