Skip to content

Instantly share code, notes, and snippets.

@jdanyow

jdanyow/index.html

Created September 1, 2020 19:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jdanyow/5ae5e13d3eb24298c75837b06c4ac648 to your computer and use it in GitHub Desktop.
Save jdanyow/5ae5e13d3eb24298c75837b06c4ac648 to your computer and use it in GitHub Desktop.
Download ZIP
svg clip-path
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>GistRun</title>
<style>
* {
margin: 0;
padding: 0;
}
.div1 {
background: linear-gradient(lightblue, orange);
height: 100vh;
}
.div2 {
margin-top: -100px;
background: aqua;
height: 100VH;
clip-path: url(#wave);
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<svg>
<clipPath id="wave" clipPathUnits="objectBoundingBox">
<path class="st0" d="M1,0c0,0-0.3,0.1-0.5,0.1S0.3,0,0,0.1V1h1L1,0z"/>
</clipPath>
</svg>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment