CSS中的波形边框 [英] Wave border in CSS

问题描述

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

更具体的：我需要创建：

蓝色元素的顶部必须是一种波浪形的边框，其顶部是透明的，因此底层图像显示通过元素，因此

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

解决方案

使用一些伪元素来绘制边框比较容易。

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

  .wave {background：linear-gradient（to right，sandybrown，chocolate）; height：50px; position：relative;}。wave :: before {content：; position：absolute;左：0; bottom：0; right：0;背景重复：重复; 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;左：0; bottom：0; right：0;背景重复：重复; height：15px; background-size：40px 20px; background-image：radial-gradient（circle在10px 15px，crimson 12px，transparent 13px）;}   < div class ='wave'>< / div>  

结合两者，我们可以得到所需的效果：

  .wave {background：linear-gradient到右边，sandybrown，巧克力）; height：50px; position：relative;}。wave :: before {content：; position：absolute;左：0; bottom：0; right：0;背景重复：重复; height：10px; background-size：20px 20px; background-image：radial-gradient（circle在10px -5px，透明12px，aquamarine 13px）;}。wave :: after {content：; position：absolute;左：0; bottom：0; right：0;背景重复：重复; height：15px; background-size：40px 20px; background-image：radial-gradient（circle在10px 15px，aquamarine 12px，transparent 13px）;}  

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

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.

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

解决方案

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>

这篇关于CSS中的波形边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！