My task is to make a div block with a border in the form of a wave, as in the picture.
Somewhere on the web, I found a perfectly suitable example for me. I added 4 children to the main div block for each side.
However, if the lower wave got up perfectly, then nothing comes out with the upper and even more lateral ones.
.menu {
position: relative;
width:100%;
height:80px;
padding: 14px;
background-color: #63B32F;
font-size:16px;
color:#fff;
text-align: center;
}
.topwave::before {
content: '';
position: absolute;
left: 0;
top: 0;
right: 0;
background-repeat: repeat;
height: 10px;
background-size: 20px 20px;
background-image:
radial-gradient(circle at 10px -5px, transparent 12px, #fff 13px);
}
.topwave::after {
content: '';
position: absolute;
left: 0;
top: 0;
right: 0;
background-repeat: repeat;
height: 12px;
background-size: 40px 20px;
background-image:
radial-gradient(circle at 10px 13px, #fff 12px, transparent 13px);
}
.bottomwave::before {
content: '';
position: absolute;
left: 0;
bottom: 0;
right: 0;
background-repeat: repeat;
height: 10px;
background-size: 20px 20px;
background-image:
radial-gradient(circle at 10px -5px, transparent 12px, #fff 13px);
}
.bottomwave::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
right: 0;
background-repeat: repeat;
height: 12px;
background-size: 40px 20px;
background-image:
radial-gradient(circle at 10px 13px, #fff 12px, transparent 13px);
}<div class="menu">
<div class="topwave"></div>
<div class="bottomwave"></div>
<div class="leftwave"></div>
<div class="rightwave"></div>
<div class="content">Some content</div>
</div>For the top I also tried transform: rotate(180deg);. It seems to work out, but it doesn't seem to be the best solution.
.menu {
position: relative;
width:100%;
height:80px;
padding: 14px;
background-color: #63B32F;
font-size:16px;
color:#fff;
text-align: center;
}
.topwave {
transform: rotate(180deg);
}
.topwave::before {
content: '';
position: absolute;
left: -10px;
top: 4px;
right: -10px;
background-repeat: repeat;
height: 10px;
background-size: 20px 20px;
background-image: radial-gradient(circle at 10px -3px, transparent 12px, #fff 13px);
}
.topwave::after {
content: '';
position: absolute;
left: -10px;
top: 4px;
right: -10px;
background-repeat: repeat;
height: 12px;
background-size: 40px 20px;
background-image: radial-gradient(circle at 10px 13px, #fff 12px, transparent 13px);
}
.bottomwave::before {
content: '';
position: absolute;
left: 0;
bottom: 0;
right: 0;
background-repeat: repeat;
height: 10px;
background-size: 20px 20px;
background-image:
radial-gradient(circle at 10px -5px, transparent 12px, #fff 13px);
}
.bottomwave::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
right: 0;
background-repeat: repeat;
height: 12px;
background-size: 40px 20px;
background-image:
radial-gradient(circle at 10px 13px, #fff 12px, transparent 13px);
}<div class="menu">
<div class="topwave"></div>
<div class="bottomwave"></div>
<div class="leftwave"></div>
<div class="rightwave"></div>
<div class="content">Some content</div>
</div>