Блог

У меня есть волнистый нижний колонтитул, который действует как блок, проблема в том, что из-за этого прозрачная часть волны (пространство, цвет которого должен совпадать с цветом фона маршрута) белая, поскольку она занимает пространство как блок.

1

2

3

Вот 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);
 }
 

Как я могу изменить его, чтобы он по-прежнему действовал как блок, но изменил цвет фона в зависимости от цвета маршрута, на котором он находится?

Самый быстрый способ, которым я бы это сделал, — это добавить top свойство к обоим псевдоэлементам, установить для их значений отрицательную высоту и изменить .wave фон.

Обновленный 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);
 }