仅使用剪辑路径的纯 CSS3 插入波头

Question

我可以很容易地使用clip-path 创建一个带有波浪形下边框的 CSS3 标题。比如

#tosHeader
{
 position:absolute;
 text-align:center;
 padding-top:1em;
 left:0;
 right:0;
 top:0;
 bottom:67vh;
 height:33vh;
 background-color:orange;
 clip-path: polygon(100% 0%, 0% 0% , 0% 52.04%, 1% 52.03%, 2% 52.01%, 3% 51.97%, 4% 51.91%, 5% 51.84%, 6% 51.76%, 7% 51.66%, 8% 51.55%, 9% 51.42%, 10% 51.28%, 11% 51.13%, 12% 50.96%, 13% 50.78%, 14% 50.58%, 15% 50.38%, 16% 50.16%, 17% 49.93%, 18% 49.69%, 19% 49.44%, 20% 49.18%, 21% 48.92%, 22% 48.64%, 23% 48.36%, 24% 48.07%, 25% 47.77%, 26% 47.47%, 27% 47.16%, 28% 46.85%, 29% 46.53%, 30% 46.21%, 31% 45.89%, 32% 45.57%, 33% 45.24%, 34% 44.92%, 35% 44.60%, 36% 44.28%, 37% 43.96%, 38% 43.64%, 39% 43.33%, 40% 43.02%, 41% 42.72%, 42% 42.42%, 43% 42.13%, 44% 41.85%, 45% 41.57%, 46% 41.31%, 47% 41.05%, 48% 40.80%, 49% 40.56%, 50% 40.33%, 51% 40.12%, 52% 39.91%, 53% 39.72%, 54% 39.54%, 55% 39.37%, 56% 39.21%, 57% 39.07%, 58% 38.94%, 59% 38.83%, 60% 38.73%, 61% 38.65%, 62% 38.58%, 63% 38.53%, 64% 38.49%, 65% 38.47%, 66% 38.46%, 67% 38.47%, 68% 38.49%, 69% 38.53%, 70% 38.59%, 71% 38.66%, 72% 38.74%, 73% 38.84%, 74% 38.95%, 75% 39.08%, 76% 39.22%, 77% 39.38%, 78% 39.54%, 79% 39.73%, 80% 39.92%, 81% 40.13%, 82% 40.34%, 83% 40.57%, 84% 40.81%, 85% 41.06%, 86% 41.32%, 87% 41.59%, 88% 41.87%, 89% 42.15%, 90% 42.44%, 91% 42.74%, 92% 43.04%, 93% 43.35%, 94% 43.66%, 95% 43.98%, 96% 44.30%, 97% 44.62%, 98% 44.94%, 99% 45.26%, 100% 45.58%);
}

<div id='tosHeader'>Header</div>

但是，我还没有弄清楚如何创建类似于下图所示的双波效果。这可以仅使用剪辑路径来完成吗？

Answer 1

当然！只需使用 z-index 随意堆叠它们即可。

#tosHeader
{
 z-index: 1;
 position:absolute;
 text-align:center;
 padding-top:1em;
 left:0;
 right:0;
 top:0;
 bottom:67vh;
 height:33vh;
 background-color:orange;
 clip-path: polygon(100% 0%, 0% 0% , 0% 52.04%, 1% 52.03%, 2% 52.01%, 3% 51.97%, 4% 51.91%, 5% 51.84%, 6% 51.76%, 7% 51.66%, 8% 51.55%, 9% 51.42%, 10% 51.28%, 11% 51.13%, 12% 50.96%, 13% 50.78%, 14% 50.58%, 15% 50.38%, 16% 50.16%, 17% 49.93%, 18% 49.69%, 19% 49.44%, 20% 49.18%, 21% 48.92%, 22% 48.64%, 23% 48.36%, 24% 48.07%, 25% 47.77%, 26% 47.47%, 27% 47.16%, 28% 46.85%, 29% 46.53%, 30% 46.21%, 31% 45.89%, 32% 45.57%, 33% 45.24%, 34% 44.92%, 35% 44.60%, 36% 44.28%, 37% 43.96%, 38% 43.64%, 39% 43.33%, 40% 43.02%, 41% 42.72%, 42% 42.42%, 43% 42.13%, 44% 41.85%, 45% 41.57%, 46% 41.31%, 47% 41.05%, 48% 40.80%, 49% 40.56%, 50% 40.33%, 51% 40.12%, 52% 39.91%, 53% 39.72%, 54% 39.54%, 55% 39.37%, 56% 39.21%, 57% 39.07%, 58% 38.94%, 59% 38.83%, 60% 38.73%, 61% 38.65%, 62% 38.58%, 63% 38.53%, 64% 38.49%, 65% 38.47%, 66% 38.46%, 67% 38.47%, 68% 38.49%, 69% 38.53%, 70% 38.59%, 71% 38.66%, 72% 38.74%, 73% 38.84%, 74% 38.95%, 75% 39.08%, 76% 39.22%, 77% 39.38%, 78% 39.54%, 79% 39.73%, 80% 39.92%, 81% 40.13%, 82% 40.34%, 83% 40.57%, 84% 40.81%, 85% 41.06%, 86% 41.32%, 87% 41.59%, 88% 41.87%, 89% 42.15%, 90% 42.44%, 91% 42.74%, 92% 43.04%, 93% 43.35%, 94% 43.66%, 95% 43.98%, 96% 44.30%, 97% 44.62%, 98% 44.94%, 99% 45.26%, 100% 45.58%);
}

#another
{
 position:absolute;
 text-align:center;
 padding-top:1em;
 left:0;
 right:0;
 top:0;
 bottom:0;
 height:100%;
 background-color:red;
 clip-path: polygon(100% 0%, 0% 0% , 0% 52.04%, 1% 52.03%, 2% 52.01%, 3% 51.97%, 4% 51.91%, 5% 51.84%, 6% 51.76%, 7% 51.66%, 8% 51.55%, 9% 51.42%, 10% 51.28%, 11% 51.13%, 12% 50.96%, 13% 50.78%, 14% 50.58%, 15% 50.38%, 16% 50.16%, 17% 49.93%, 18% 49.69%, 19% 49.44%, 20% 49.18%, 21% 48.92%, 22% 48.64%, 23% 48.36%, 24% 48.07%, 25% 47.77%, 26% 47.47%, 27% 47.16%, 28% 46.85%, 29% 46.53%, 30% 46.21%, 31% 45.89%, 32% 45.57%, 33% 45.24%, 34% 44.92%, 35% 44.60%, 36% 44.28%, 37% 43.96%, 38% 43.64%, 39% 43.33%, 40% 43.02%, 41% 42.72%, 42% 42.42%, 43% 42.13%, 44% 41.85%, 45% 41.57%, 46% 41.31%, 47% 41.05%, 48% 40.80%, 49% 40.56%, 50% 40.33%, 51% 40.12%, 52% 39.91%, 53% 39.72%, 54% 39.54%, 55% 39.37%, 56% 39.21%, 57% 39.07%, 58% 38.94%, 59% 38.83%, 60% 38.73%, 61% 38.65%, 62% 38.58%, 63% 38.53%, 64% 38.49%, 65% 38.47%, 66% 38.46%, 67% 38.47%, 68% 38.49%, 69% 38.53%, 70% 38.59%, 71% 38.66%, 72% 38.74%, 73% 38.84%, 74% 38.95%, 75% 39.08%, 76% 39.22%, 77% 39.38%, 78% 39.54%, 79% 39.73%, 80% 39.92%, 81% 40.13%, 82% 40.34%, 83% 40.57%, 84% 40.81%, 85% 41.06%, 86% 41.32%, 87% 41.59%, 88% 41.87%, 89% 42.15%, 90% 42.44%, 91% 42.74%, 92% 43.04%, 93% 43.35%, 94% 43.66%, 95% 43.98%, 96% 44.30%, 97% 44.62%, 98% 44.94%, 99% 45.26%, 100% 45.58%);
}

<div id="tosHeader">Header</div>
<div id="another"></div>