CSS中的波形边框

Question

我知道你在想什么,至少有一百万个像这样的问题,询问边界的波浪,或者元素边缘的波浪.但是,我有一个不同的问题.我需要的是曲折边缘之间的组合(我不知道如何称呼它,我不是英文)和波浪边缘.

更具体:我需要创建:

蓝色元素的顶部必须是波浪形的边框,其中顶部是透明的,因此底层图像显示"穿过元素",可以这么说.

这可以用CSS吗？我宁愿不使用图像,因为会有多个像这样的元素,具有不同的颜色(这意味着每个元素的边缘颜色不同).

Answer 1

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

首先我们画出波浪的底部:

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

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

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

结合这两者给我们带来了预期的效果:

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

用更平坦的波浪更新.

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