0

Hello I'm trying to make a wave effect in the css using before and after

but I'm not able to put my waves on the ends of the top and bot

and I also wanted to rotate the bot's wave so that the waves are pointing down:

code:

<div className="App">
  <h1>Hello CodeSandbox</h1>
  <h2>Start editing to see some magic happen!</h2>
</div>

css:

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

problem:

enter image description here

I need to turn the wave effect down:

enter image description here

and I need to position this wave on top of my div

enter image description here example:

https://codesandbox.io/s/lucid-morning-fefe4

Improve this question
0

1 Answer 1

Reset to default
0

you mean like this?

.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 15px, 
    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
  );
}


.App {
  font-family: sans-serif;
  text-align: center;
  background: red;
  height: 50vh;
  position: relative;
}

.App::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
  );
}
.App::after {
  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 15px,
    transparent 12px,
    aquamarine 13px
  );
}

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

i need it but inverted kk the top one has to be in the bot and the bot one has to be at the top
sorry not sure what kind you wanted , so i edited it to two version CSS . try both :)
thanks bro, but the two are the same
sorry i edited it again . try it