CSS中的波形边框

Question

我知道你在想什么，至少有一百万个这样的问题，询问边界的波浪，或者元素边缘的波浪。但是，我有一个不同的问题。我需要的是zigzag-edge（我不知道如何称呼它，我不是英语）和wave-edge之间的组合。

更具体：我需要创建：

蓝色元素的顶部必须是波浪形的边框，其中顶部是透明的，因此底层图像显示通过元素＆＃39;，所以说。

这可以用CSS吗？我宁愿不使用图像，因为会有多个像这样的元素，不同的颜色（这意味着每个元素的边缘颜色不同）。

Answer 1

使用几个伪元素绘制边框相对容易。

首先我们绘制波浪的底部：

＆＃13;

＆＃13;

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

＆＃13;

<div class='wave'></div>

＆＃13;

＆＃13;

＆＃13;

然后我们用另一个伪元素的背景填充所有其他沟。这个背景是两倍宽，所以我们只填充奇数沟渠。

＆＃13;

＆＃13;

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

＆＃13;

<div class='wave'></div>

＆＃13;

＆＃13;

＆＃13;

将两者结合起来可以产生预期的效果：

＆＃13;

＆＃13;

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

＆＃13;

<div class='wave'></div>

＆＃13;

＆＃13;

＆＃13;

更新了奉承 wave。

＆＃13;

＆＃13;

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

＆＃13;

<div class='wave'></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试 -

#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>