CSS: element with gradient background and wave border [duplicate] - css

Question

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I know what you're thinking, there's at least a million questions like this, asking about waves in borders, or waves at the edges of elements. However, I have a different question. What I need is a combination between a zigzag-edge (I have no idea how to call it, I'm not English) and a wave-edge.
More specific: I need to create this:
The top part of the blue element has to be a wavy kind of border, where the top part is transparent so the underlying image shows 'through the element', so to say.
Is this do-able with CSS? I'd rather not use images, simply because there will be multiple elements like these, with different colours (that means different edge colours per element).

Answer 1

It's relatively easy to draw a border like that with a couple of pseudo-elements.
First we draw the bottom of the wave:
.wave{
background:
linear-gradient(to right, sandybrown, chocolate);
height: 50px;
position: relative;
}
.wave::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, maroon 13px);
}
<div class='wave'></div>
We then fill every other ditch with the background of another pseudo-element. This background is twice as wide so we only fill the odd ditches.
.wave{
background:
linear-gradient(to right, sandybrown, chocolate);
height: 50px;
position: relative;
}
.wave::after{
content: "";
position: absolute;
left: 0;
bottom: 0;
right: 0;
background-repeat: repeat;
height: 15px;
background-size: 40px 20px;
background-image:
radial-gradient(circle at 10px 15px, crimson 12px, transparent 13px);
}
<div class='wave'></div>
Combining the two gives us the desired effect:
.wave{
background:
linear-gradient(to right, sandybrown, chocolate);
height: 50px;
position: relative;
}
.wave::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, aquamarine 13px);
}
.wave::after{
content: "";
position: absolute;
left: 0;
bottom: 0;
right: 0;
background-repeat: repeat;
height: 15px;
background-size: 40px 20px;
background-image:
radial-gradient(circle at 10px 15px, aquamarine 12px, transparent 13px);
}
<div class='wave'></div>
Updated with a flatter wave.
.wave{
background:
linear-gradient(to right, sandybrown, chocolate);
height: 50px;
position: relative;
}
.wave::before, .wave::after{
border-bottom: 5px solid yellow;
}
.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, yellow 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, yellow 20px, transparent 21px);
}
<div class='wave'></div>

Answer 2

Try-
#wave {
position: relative;
height: 70px;
width: 54px;
background:#79C5BD none repeat scroll 0% 0%;float:left;margin-top:20px
}
#wave::after {
content: "";
display: block;
position: absolute;
border-radius: 100% 100%;
height: 70px;
background-color: #79C5BD;
left: 0px;
bottom: 27px;
width: 60px;
}
#wave {
position: relative;
height: 70px;
width: 54px;
background:#79C5BD none repeat scroll 0% 0%;float:left;margin-top:20px
}
#wave::after {
content: "";
display: block;
position: absolute;
border-radius: 100% 100%;
height: 70px;
background-color: #79C5BD;
left: 0px;
bottom: 27px;
width: 60px;
}
<div id="wave"></div>
<div id="wave"></div>
<div id="wave"></div>
<div id="wave"></div>
<div id="wave"></div>
<div id="wave"></div>
<div id="wave"></div>
<div id="wave"></div>
<div id="wave"></div>
<div id="wave"></div><div id="wave"></div>