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.
@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 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
