Bordo d'onda nei CSS

Question

So cosa stai pensando, ci sono almeno un milione di domande come questa, che chiedono informazioni sulle onde nei bordi o le onde ai bordi degli elementi. Tuttavia, ho una domanda diversa. Ciò di cui ho bisogno è una combinazione tra uno zigzag-edge (non ho idea di come chiamarlo, non sono inglese) e uno wave-edge.

più specifiche: devo generare questa:

La parte superiore dell'elemento blu deve essere un tipo ondulato di confine, dove la parte superiore è trasparente in modo mostra l'immagine sottostante ' attraverso l'elemento ', per così dire.

È questa possibilità con i CSS? Preferirei non usare le immagini, semplicemente perché ci saranno più elementi come questi, con colori diversi (che significa colori di bordo diversi per elemento).

Answer 1

E 'relativamente facile tracciare un confine così con un paio di pseudo-elementi.

In primo luogo abbiamo disegnare la parte inferiore dell'onda:

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

Abbiamo poi riempire ogni altro fosso con lo sfondo di un altro pseudo-elemento. Questo sfondo è largo il doppio, quindi riempiamo solo i fossati dispari.

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

Combinando i due ci dà l'effetto desiderato:

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

Answer 2

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>