Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
3.0k views
in Technique[技术] by (71.8m points)

css - How can i make this wave effect on both bottom and top

I would like the bottom wave effect on top too! Can anyone show me how it's done.

The effect should look the same on the top of where it is placed on the top as well as the bottom.

I am actually trying to do is break a image top and bottom with waves, so that partial top and bottom of image disappears in waves.

Open Image

@import url(https://fonts.googleapis.com/css?family=Montserrat);

//variables
$background: #FFF;

body {
  background-color: $background;
  color: #ffF;
  font-family: Montserrat, Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 1em;
  line-height: 2em;
  margin: 0;
  padding: 0;
}

.wave{
  text-align: center;
  background: linear-gradient(to bottom, sandybrown, chocolate);
  height: 50px;
  position: relative;
}
.wave::before{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  background-repeat: repeat-x;
  height: 10px;
  background-size: 20px 20px;
  background-image: radial-gradient(circle at 10px -5px, transparent 12px, white 13px);
}
.wave::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  background-repeat: repeat-x;
  height: 15px;
  background-size: 40px 20px;
  background-image: radial-gradient(circle at 10px 15px, white 12px, transparent 13px);
}
.content {
  color: #333;
  font-size: 0.8em;
  padding: 1em;
}
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>CSS Rounded Borders</title>
</head>
<body>
  <div class="wave">I'm wavy</div>
  
  <div class="content">
    With two special pseudo elements (before and after) and the power of repeating css3 radial gradients this ruffle like waves are done much easier than before without an image file.
  </div>
  
</body>
</html>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

You can do one part using the pseudo elements and the other using multiple background:

.wave{
  text-align: center;
  background:
    radial-gradient(circle at 10px 15px, white 12px, transparent 13px) left 0 bottom -5px/40px 20px repeat-x,
    radial-gradient(circle at 10px -5px, transparent 12px, white 13px) left 0 bottom -10px/20px 20px repeat-x,
    linear-gradient(to bottom, sandybrown, chocolate);
  padding:40px 0;
  position: relative;
}
.wave::before,
.wave::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  background-repeat: repeat-x;
  transform:scaleY(-1);
}
.wave::before{
  height: 10px;
  background-size: 20px 20px;
  background-image: radial-gradient(circle at 10px -5px, transparent 12px, white 13px);
}
.wave::after{
  height: 15px;
  background-size: 40px 20px;
  background-image: radial-gradient(circle at 10px 15px, white 12px, transparent 13px);
}
  <div class="wave">I'm wavy</div>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...