Dessiner une courbe avec css
je veux créer une animation avec css qui simule un mouvement d'onde.
Je dois changer une ligne-ou div-à une courbe pour ça...
Les règles CSS que je connais, font la div entière à semi-circulaire ou changent la frontière d'élément.
Exemple:
border-radius, ou perspective ou border-top-radius...
Cette image vous montre ce que je veux:
curve" src="/images/content/20803489/567bce1e117254fbfa1f05eac1c97201.png">
avez-vous de l'expérience à ce sujet? ou est-il possible?
Merci à Avance...
2 réponses
vous pourriez utiliser un bord asymétrique pour faire des courbes avec CSS.
border-radius: 50%/100px 100px 0 0;
.box {
width: 500px;
height: 100px;
border: solid 5px #000;
border-color: #000 transparent transparent transparent;
border-radius: 50%/100px 100px 0 0;
}<div class="box"></div>@Navaneeth et @Antfish, pas besoin de se transformer vous pouvez faire comme cela aussi parce que dans la solution ci-dessus seul le bord supérieur est visible donc pour la courbe intérieure vous pouvez utiliser le bord inférieur.
.box {
width: 500px;
height: 100px;
border: solid 5px #000;
border-color: transparent transparent #000 transparent;
border-radius: 0 0 240px 50%/60px;
}<div class="box"></div>