html - 如何制作 flex/波浪形页脚线，并在其后面带有谷歌地图？

Question

我怎样才能制作如下所示的波浪形、 flex 的页脚？

我尝试使用 css before::和after:: ，我尝试使用 border-right-bottom-radius ，以及许多类似的技巧。

我有这个图片元素:

我可以使用它吗？

我想要下面的 Google map 带有 z-index: -1 。我的意思是，我希望 Google map 出现在上述曲线的后面( position: absolute )。

有人可以帮助我在代码中使用 Google map 和顶部 flex 绿色边框执行该页脚吗？

Answer 1

不久前，大概一年前，我有一位客户想要同样的东西，但没有使用图像。这是我使用的代码。请参阅http://jsfiddle.net/yrovnjg3/为了行动。这会创建 2 个“爪子”(其中一个是倒置的)，看起来几乎就像上面的图片一样。我在演示的末尾添加了一些 CSS，以帮助分离并显示 2 个不同的爪子，例如粉红色的盒子。只需删除最后几行，一切都会像上图一样，除了颜色是红色并且不会成一定 Angular 。只需按照以下说明操作即可。玩得开心。希望这会有所帮助。

<!--image-->
<div id="line"></div>
<!--google map-->
/*
If you change "#line {transform: rotate(0deg);}", then you'll need to adjust: "#line:after {top: ---; left: ---;}". Usually just changing one or both down or up a number will fix rotation stacing problems.
To some degree, changing "border-radius: 50px 0px 0px 0px;" to something like "border-radius: 50px 0px 0px 0px;" will act like "transform: rotate();".
Do NOT change "#line:after {transform: rotate(180deg);}". Doing so will mess everything up.

If any of the lines marked with an "x" are changed, you'll need to change all, or most, of the ones marked with an "x"
*/

#line {position: relative; /*can be "relative" or "absolute". doesn't really matter.*/
       width: 0px;
       height: 0px;
       /*x*/ transform: rotate(0deg);}

#line:after, #line:before {position: absolute;
                           content: "";
                           /*x*/ width: 50px; /*if this is changed, then don't forget to change "left" in ":after".*/
                           /*x*/ height: 50px; /*x*/
                           /*x*/ border-radius: 50px 0px 0px 0px; /*only have a value on the first set.*/
                           /*x*/ border-top: 12px solid #ff0000; /*can be any color you want.*/}

#line:before {/*just if you want to customize the first half of the shape.*/}

#line:after {/*x*/ top: -50px;
             /*x*/ left: 50px;
             transform: rotate(180deg); /*don't even think about changing this.*/}



/*REMOVE THESE. DEMO PURPOSES ONLY:*/
body{margin:100px;}
#line{background:pink;width:20px;height:20px;}
#line:before{border-color:blue;}
#line:after{border-color:green;}