web-dev-qa-db-fra.com

Bordure de vague en CSS

Je sais ce que vous pensez, il y a au moins un million de questions comme celle-ci, concernant les vagues dans les bordures ou les vagues aux bords des éléments. Cependant, j'ai une question différente. Ce dont j'ai besoin, c'est d'une combinaison entre un zigzag-Edge (je ne sais pas comment l'appeler, je ne suis pas anglais) et un wave-Edge .

Plus spécifique: je dois créer ceci:

enter image description here

La partie supérieure de l'élément bleu doit être une sorte de bordure ondulée, où la partie supérieure est transparente de sorte que l'image sous-jacente montre "à travers l'élément", pour ainsi dire.

Est-ce faisable avec CSS? Je préfère ne pas utiliser d'images, simplement parce qu'il y aura plusieurs éléments comme ceux-ci, avec des couleurs différentes (ce qui signifie différentes couleurs de bord par élément).

csscss3bordercss-shapes
11
Sean

Il est relativement facile de tracer une bordure comme celle-ci avec quelques pseudo-éléments.

Nous dessinons d'abord le bas de la vague:

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

Nous remplissons ensuite chaque fossé avec l'arrière-plan d'un autre pseudo-élément. Ce fond est deux fois plus large donc nous ne remplissons que les fossés impairs.

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

La combinaison des deux nous donne l'effet souhaité:

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

Mis à jour avec une vague plus plate.

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

Essayer-

#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>
1
Shantanu Verma