Change footer background color depending on route Angular

Question

I have a wavy footer which acts as a block, the problem is that because of that, the transparent part of the wave (the space which color should be the same as the route background) is white since it's occupying space as a block.

1

2

3

Here's the css:

.wave{
   background: rgba(255, 255, 255, 0);
   height: 15px;
   position: relative;
 }

 .wave::before, .wave::after{
   border-bottom: 5px solid #69c0c0;
 }

 .wave::before{
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   height: 10px;
   background-size: 20px 40px;
   background-image:
   radial-gradient(circle at 10px -15px, transparent 20px, #69c0c0 21px);
 }

 .wave::after{
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   height: 15px;
   background-size: 40px 40px;
   background-image:
   radial-gradient(circle at 10px 26px, #69c0c0 20px, transparent 21px);
 }

How could I change it in order to still act as a block, but change it's background color depending on the color of the route it's on?

Answer 1

The quickest way I would come around this is by adding the top property to both pseudo-elements, setting their values to negative height, and changing .wave's background.

Updated CSS

.wave{
   background: #69c0c0;
   height: 15px;
   position: relative;
 }

 .wave::before, .wave::after{
   border-bottom: 5px solid #69c0c0;
 }

 .wave::before{
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   top: -10px;
   height: 10px;
   background-size: 20px 40px;
   background-image:
   radial-gradient(circle at 10px -15px, transparent 20px, #69c0c0 21px);
 }

 .wave::after{
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   top: -15px;
   height: 15px;
   background-size: 40px 40px;
   background-image:
   radial-gradient(circle at 10px 26px, #69c0c0 20px, transparent 21px);
 }