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);
}
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…