Wave border in CSS

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).

Related to http://stackoverflow.com/questions/25895895/creating-a-droplet-like-border-effect-in-css/25903879#25903879. You can't exactly produce such a wave border effect with CSS (with a repeating pattern, unless you use a lot of elements). The closest is the thread I linked prior. — Harry, Nov 17 '15 at 14:14
Thanks, I'll look into that. Could the people giving me downvotes please tell me what the reason is for their downvote? I've did my research, I've come to a dead end, so far there's just one question that's related to mine (the one Harry linked), and I didn't find it in the search. What should I improve next time before I ask a question? — Sean, Nov 17 '15 at 15:02
Shocking that they never answered the question above. Why is the SO community so toxic?! — , Feb 17 '18 at 12:42

woestijnrog · Accepted Answer · 2018-03-17T13:36:45.677

71

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>

edited Mar 17 '18 at 13:36

answered Nov 17 '15 at 18:01

woestijnrog

1,549
12
9

Looks excellent. Very nice answer :) – Harry Nov 18 '15 at 01:32
This looks fantastic, thank you! I haven't gotten round to the elements yet that use the wavey edges, but I'm sure this will work perfectly. Thanks again! – Sean Nov 18 '15 at 17:12
Okay, this works perfectly, but it is worth noting that this won't work in anything below IE10. – Sean Nov 23 '15 at 08:55
Excellently done. – Olivier Butler Dec 15 '16 at 23:53
man you are awesome! – Alex Michailidis Feb 28 '18 at 19:41
How should one go about "flattening" the wave? – cfraser Mar 13 '18 at 19:31
@cfraser Updated my answer with a flatter wave. You need a bigger circle / radius to make the wave appear flatter. – woestijnrog Mar 17 '18 at 14:09
PO: _How long it would it takes to make a wave border here?_ . Me: _IDK, I guess it is possible in pure CSS, I'm not an expert, give me one hour_ . PO: _OK do it_ . ***Five minutes later*** . Me: _Done!_ . – ncuillery May 04 '18 at 21:11
This is a really elegant answer man. Thanks! – CU3ED Jun 14 '18 at 01:26
You are an absolute life saver, my dude. Was beating my head against a wall all morning trying to figure out how to do this with an SVG in React, because I needed to color it dynamically. This is far more elegant. – dlwiest Sep 19 '19 at 14:31
Amazing solution! Any ideas how to modify this so that the lower part is transparent? – Igor Feb 10 '20 at 16:25
@Igor, Can you elaborate on what you mean by making the lower part transparent? – woestijnrog Feb 12 '20 at 17:17
How do I flip it? – Brackets Dec 18 '20 at 19:34
@woestijnrog the god ! – Kiji_T May 25 '21 at 14:57

score -1 · Answer 2 · answered Nov 17 '15 at 14:45

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>

That is more of a droplet than a wave. When you compare with the image provided in question you'd notice that the bottom part is not curving. — Harry, Nov 17 '15 at 14:48
What Harry said, yeah. I really need the wave, that's what the client wants. Besides, my Lead Dev won't like it if I use countless div's, just for aesthetic purposes.. EDIT: using thesame ID multiple times kinda goes against the purpose of an ID. — Sean, Nov 17 '15 at 14:58

Wave border in CSS

2 Answers2

Linked

Related