仅使用clip-path实现Pure CSS3内凹双波浪头部效果的方法咨询

问题描述 #

我使用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>

但我暂时无法实现类似下图所示的双波浪效果，请问仅使用clip-path属性是否可以完成该效果的开发？

解答 #

仅用clip-path属性完全可以实现双波浪效果，不需要额外新增DOM节点。
你之前实现单波浪用的是polygon函数，只定义了底部一段波浪的坐标点，要做双波浪的话，只要在polygon的坐标序列里新增第二段波浪的点位就可以：把底部裁剪路径拆成两段不同振幅、不同相位的波浪，按顺序把所有坐标点连续写进polygon参数里就行。
实操的时候注意两个细节：

• 所有坐标点要按同一个方向（顺时针或逆时针）连续排列，不要出现路径交叉，否则裁剪结果会出错
• 要是觉得手动计算polygon的百分比点位太麻烦，可以换用clip-path的path()函数，直接写SVG格式的路径参数，比写一堆零散的百分比点位简洁很多，后期调整波浪的弧度、波长也更方便。
  如果你需要给不同波浪设置不同颜色或者独立动画，也可以用两层叠加的DOM元素，分别给两层设置不同的clip-path波浪参数错位摆放，这种实现方式调整起来会更灵活。

内容的提问来源于stack exchange，提问作者DroidOS