div+css布局实现堆叠式波形分隔器代码-html代码-BFW代码库

div+css布局实现堆叠式波形分隔器代码

代码语言：html

代码描述：div+css布局实现堆叠式波形分隔器代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">


    <link rel="canonical" href="https://codepen.io/thebabydino/pen/PwwQxdb">
  <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Exo:wght@100..900&family=Oswald:wght@200..700&display=swap" rel="stylesheet">
  
  
  
<style>
article:nth-of-type(n + 2) {
  padding-top: 4em;
  clip-path: polygon(0% 2em, 5% 2.618em, 10% 3.176em, 15% 3.618em, 20% 3.902em, 25% 4em, 30% 3.902em, 35% 3.618em, 40% 3.176em, 45% 2.618em, 50% 2em, 55% 1.382em, 60% 0.824em, 65% 0.382em, 70% 0.098em, 75% 0em, 80% 0.098em, 85% 0.382em, 90% 0.824em, 95% 1.382em, 100% 2em, 100% 100%, 0 100%);
}
article:nth-last-of-type(n + 2) {
  margin-bottom: -4em;
  padding-bottom: 4em;
}

/* non-essential pre.........完整代码请登录后点击上方下载按钮下载查看