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).
CSS Border Not Showing If you've set the shorthand border property in CSS and the border is not showing, the most likely issue is that you did not define the border style. While the border-width and border-color property values can be omitted, the border-style property must be defined. Otherwise, it will not render.
We can specify the no border property using CSS border: none, border-width : 0, border : 0 properties. Approach 1: We will give border-color, border-style properties to both headings, for showing text with border and no-border. For no border heading, we will use the border-width : 0 which will result in no border.
How to Create Wave Background using CSS ? CSS code: In this section, we will use some CSS property to design the wave background. First we will add a basic background to the section and then use the before selector to set the wave png file on top of our background.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With