CSS CSS中的波浪边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33759102/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Wave border in CSS
提问by Sean
I know what you're thinking, there's at least a million questions like this, asking about waves in borders, or waves at the edges of elements. However, I have a different question. What I need is a combination between a zigzag-edge(I have no idea how to call it, I'm not English) and a wave-edge.
我知道你在想什么，至少有一百万个这样的问题，询问边界上的波浪，或者元素边缘的波浪。但是，我有一个不同的问题。我需要的是zigzag-edge（我不知道如何称呼它，我不是英语）和wave-edge 之间的组合。
More specific: I need to create this:
更具体：我需要创建这个：
The top part of the blue element has to be a wavy kind of border, where the top part is transparent so the underlying image shows 'through the element', so to say.
蓝色元素的顶部必须是一种波浪形边框，其中顶部是透明的，因此底层图像显示“通过元素”，可以这么说。
Is this do-able with CSS? I'd rather not use images, simply because there will be multiple elements like these, with different colours (that means different edge colours per element).
这可以用 CSS 实现吗？我宁愿不使用图像，只是因为会有多个这样的元素，具有不同的颜色（这意味着每个元素的边缘颜色不同）。
回答by woestijnrog
It's relatively easy to draw a border like that with a couple of pseudo-elements.
使用几个伪元素绘制这样的边框相对容易。
First we draw the bottom of the wave:
首先我们画出波浪的底部：
.wave{
background:
linear-gradient(to right, sandybrown, chocolate);
height: 50px;
position: relative;
}
.wave::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, maroon 13px);
}<div class='wave'></div>We then fill every other ditch with the background of another pseudo-element. This background is twice as wide so we only fill the odd ditches.
然后我们用另一个伪元素的背景填充所有其他沟渠。这个背景是两倍宽，所以我们只填充奇怪的沟渠。
.wave{
background:
linear-gradient(to right, sandybrown, chocolate);
height: 50px;
position: relative;
}
.wave::after{
content: "";
position: absolute;
left: 0;
bottom: 0;
right: 0;
background-repeat: repeat;
height: 15px;
background-size: 40px 20px;
background-image:
radial-gradient(circle at 10px 15px, crimson 12px, transparent 13px);
}<div class='wave'></div>Combining the two gives us the desired effect:
将两者结合起来给我们想要的效果：
.wave{
background:
linear-gradient(to right, sandybrown, chocolate);
height: 50px;
position: relative;
}
.wave::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);
}
.wave::after{
content: "";
position: absolute;
left: 0;
bottom: 0;
right: 0;
background-repeat: repeat;
height: 15px;
background-size: 40px 20px;
background-image:
radial-gradient(circle at 10px 15px, aquamarine 12px, transparent 13px);
}<div class='wave'></div>Updated with a flatterwave.
更新了更平坦的波浪。
.wave{
background:
linear-gradient(to right, sandybrown, chocolate);
height: 50px;
position: relative;
}
.wave::before, .wave::after{
border-bottom: 5px solid yellow;
}
.wave::before{
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 10px;
background-size: 20px 40px;
background-image:
radial-gradient(circle at 10px -15px, transparent 20px, yellow 21px);
}
.wave::after{
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 15px;
background-size: 40px 40px;
background-image:
radial-gradient(circle at 10px 26px, yellow 20px, transparent 21px);
}<div class='wave'></div>回答by Shantanu Verma
Try-
尝试-
#wave {
position: relative;
height: 70px;
width: 54px;
background:#79C5BD none repeat scroll 0% 0%;float:left;margin-top:20px
}
#wave::after {
content: "";
display: block;
position: absolute;
border-radius: 100% 100%;
height: 70px;
background-color: #79C5BD;
left: 0px;
bottom: 27px;
width: 60px;
}
#wave {
position: relative;
height: 70px;
width: 54px;
background:#79C5BD none repeat scroll 0% 0%;float:left;margin-top:20px
}
#wave::after {
content: "";
display: block;
position: absolute;
border-radius: 100% 100%;
height: 70px;
background-color: #79C5BD;
left: 0px;
bottom: 27px;
width: 60px;
}<div id="wave"></div>
<div id="wave"></div>
<div id="wave"></div>
<div id="wave"></div>
<div id="wave"></div>
<div id="wave"></div>
<div id="wave"></div>
<div id="wave"></div>
<div id="wave"></div>
<div id="wave"></div><div id="wave"></div>