我怎样才能在底部和顶部都产生这种波浪效果 [英] 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.
@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>
推荐答案
您可以使用伪元素来做一部分，而使用多个背景来做另一件事:
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>
这篇关于我怎样才能在底部和顶部都产生这种波浪效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
