htl.html`
<style>
${styles}
.container {
padding: 4em 0;
}
.clip-demo:nth-child(odd) {
background-color: rebeccapurple;
color: white;
}
.clip-demo:nth-child(odd) > * {
color: white;
}
.clip-demo:nth-child(even) {
background-color: white;
}
</style>
<div class="container">
<div class="clip-demo">
<h1>Here's a big wavy section</h1>
</div>
<div class="clip-demo">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at convallis purus. Mauris quis gravida enim. Pellentesque luctus, massa vel interdum condimentum, risus est luctus mi, scelerisque mattis velit massa ac ante. Fusce pharetra diam a tellus molestie dictum. Sed quis tortor sit amet lorem porttitor commodo quis eu turpis. Pellentesque vitae libero tincidunt, tempus magna nec, eleifend lectus. Sed lacus mauris, rhoncus non pellentesque vitae, tempor et justo. Duis at lobortis mi. Nunc ultricies urna vitae justo eleifend, at convallis elit congue.</p>
</div>
<div class="clip-demo">
<p>Aliquam id ipsum eros. Vivamus nisl turpis, dictum sit amet dolor in, maximus pellentesque magna. Cras nisi purus, placerat et dapibus hendrerit, consectetur nec mi. Fusce dictum arcu in lorem ultrices accumsan. Fusce ullamcorper dapibus quam ut aliquam. Phasellus viverra dapibus ipsum. Ut non ligula vehicula, dictum est eu, interdum arcu. Suspendisse potenti. Sed scelerisque est ante, nec convallis arcu viverra non. Nulla consequat imperdiet tellus vitae molestie.</p>
</div>
<div class="clip-demo" />
</div>
`