Hey there! I'm currently experimenting with creating a wave effect using CSS, specifically utilizing 'before' and 'after'.
However, I've encountered an issue where I can't seem to position my waves correctly at the top and bottom ends.
Additionally, I would like to rotate the bottom wave so that it points downwards:
Here's the code snippet I'm working with:
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
</div>
For the CSS part, here is what I have:
.App {
font-family: sans-serif;
text-align: center;
background: red;
height: 50vh;
position: relative;
}
.App::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,
aquamarine 13px
);
}
.App::after {
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
);
}
The current problem I'm facing can be visualized in this image:
https://i.sstatic.net/bM5Be.png
I am aiming to achieve a downward-facing wave effect like shown here:
https://i.sstatic.net/KFe5e.png
Also, I need assistance in positioning the wave above my div element as illustrated here:
https://i.sstatic.net/GTKyZ.png An example similar to what I'm trying to accomplish can be seen here: