Forme ondulée avec css
j'essaie de recréer cette image avec CSS:
Je n'en aurais pas besoin pour répéter. C'est ce que j'ai commencé, mais il a juste une ligne droite:
#wave {
position: absolute;
height: 70px;
width: 600px;
background: #e0efe3;
}
<div id="wave"></div>
35
demandé sur
Temani Afif
2013-06-20 02:38:16
4 réponses
Je ne suis pas sûr que ce soit votre forme mais c'est proche - vous pouvez jouer avec les valeurs:
#wave {
position: relative;
height: 70px;
width: 600px;
background: #e0efe3;
}
#wave:before {
content: "";
display: block;
position: absolute;
border-radius: 100% 50%;
width: 340px;
height: 80px;
background-color: white;
right: -5px;
top: 40px;
}
#wave:after {
content: "";
display: block;
position: absolute;
border-radius: 100% 50%;
width: 300px;
height: 70px;
background-color: #e0efe3;
left: 0;
top: 27px;
}
<div id="wave"></div>
53
répondu
Cameron A
2016-04-09 19:38:50
je pense que c'est la bonne façon de faire une forme comme vous le souhaitez. En utilisant les possibilités SVG, et un conteneur pour garder la forme sensible.
svg {
display: inline-block;
position: absolute;
top: 0;
left: 0;
}
.container {
display: inline-block;
position: relative;
width: 100%;
padding-bottom: 100%;
vertical-align: middle;
overflow: hidden;
}
<div class="container">
<svg viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet">
<path d="M0,100 C150,200 350,0 500,100 L500,00 L0,0 Z" style="stroke: none; fill:red;"></path>
</svg>
</div>
41
répondu
ThomasA
2015-05-01 15:24:27
mon implémentation CSS pure basée sur ci-dessus avec une largeur de 100%. Espérons que cela aide!
#wave-container {
width: 100%;
height: 100px;
overflow: hidden;
}
#wave {
display: block;
position: relative;
height: 40px;
background: black;
}
#wave:before {
content: "";
display: block;
position: absolute;
border-radius: 100%;
width: 100%;
height: 300px;
background-color: white;
right: -25%;
top: 20px
}
#wave:after {
content: "";
display: block;
position: absolute;
border-radius: 100%;
width: 100%;
height: 300px;
background-color: black;
left: -25%;
top: -240px;
}
<div id="wave-container">
<div id="wave">
</div>
</div>
9
répondu
PVermeer
2018-03-02 17:53:06
mon implémentation utilise l'élément svg en html et j'ai aussi fait un générateur pour faire la vague que vous voulez:
https://smooth.ie/blogs/news/svg-wavey-transitions-between-sections
<div style="height: 150px; overflow: hidden;">
<svg viewBox="0 0 500 150" preserveAspectRatio="none" style="height: 100%; width: 100%;">
<path d="M0.00,92.27 C216.83,192.92 304.30,8.39 500.00,109.03 L500.00,0.00 L0.00,0.00 Z" style="stroke: none;fill: #e1efe3;"></path>
</svg>
</div>
4
répondu
Patch92
2018-07-29 20:08:54