Créer des div non horizontales

Messages postés
19
Date d'inscription
vendredi 10 avril 2015
Statut
Membre
Dernière intervention
29 mai 2019
-
Bonjour,

J'aimerais savoir comment faire pour créer des div arrondies (mais pas forcément sur le côté ), que la div soit courbée sur l'intérieur, une photo vaut 1000 mots :

http://www.zupimages.net/viewer.php?id=19%2F22%2F1byt.png

Je ne sais même pas si c'est possible en css, j'arrive juste à arrondir les côtés. Généralement les gens qui font ça, c'est fait avec une image en arrière plan ? la seule technique que j'ai trouve c'est de tracer des courbes sur paint, ça se fait en 30 secondes, je colore la partie supérieur de la courbe d'une couleur et la partie inférieure d'une autre couleur et je l'intègre en background et après je mets mon texte en html/php dessus etc.. problème c'est que je me retrouve avec 50 backgrounds si je rechange à chaque fois les courbes, les couleurs etc et du coup pour les performances d'un site etc..? Je fais comme ça :

http://www.zupimages.net/viewer.php?id=19%2F22%2F1j9k.png

Est-ce une bonne solution ?


Merci
Afficher la suite 

1 réponse

0
Merci
Salut, je n'ai pas tout compris à la question. Pourquoi 50 images et bien sûr les éléments de la page sont basés sur des rectangles. Une seule image suffit selon moi.
Avec une image en png vous pouvez avoir de la transparence.
Paint? vraiment il y a mieux, comme Gimp, et vous assurer d'utiliser du 72ppi ou ppp. Ce que vous appelez des courbes c'est une image et donc rectangulaire aussi.
La façon dont vous l'incorporez au site fait tout.
Si vous utilisez la même image tout le temps elle n'aura besoin que d'être chargée une seule fois même si vous avez plusieurs fois à l'utiliser, ce qui n'est pas le cas si je comprends bien votre question.
laura-18
Messages postés
19
Date d'inscription
vendredi 10 avril 2015
Statut
Membre
Dernière intervention
29 mai 2019
-
Salut, voilà exactement. Moi ce que je voulais faire c'était créer les courbes, que la ma div contourne la courbe et ce stoppe à ce niveau et donc changer le background et répéter l'opération en conséquence. Exemple : http://www.zupimages.net/viewer.php?id=19%2F22%2F5zer.png

comme sur ce thème WordPress, créer des div non droites :
https://www.elegantthemes.com/blog/theme-releases/shape-dividers


J'ai pensé à dessiner à la main, je fais mes courbes, je change de background et j'intègre qu'une fois l'arrière plan (mais après il faut que le texte tombe pile là ou il faut etc, enfin c'est compliqué à savoir à l'avance etc, par exemple si je veux que mon premier paragraphe tombe sur cette couleur, l'autre sur celle là, faut tout savoir à l'avance, enfin vous voyez, au moment ou je l'intégrerai, c'est plus facilement modifiable en css etc ?) et du coup css3, bootstrap 4 ne me servent plus à rien et si je veux par exemple mettre un dégradé exemple "background linear gradient" du coup je suis oblige de faire tout ça directement dans le logiciel graphique.

J'ai regardé 50 tutoriels, il y en a qui utilisent SVG, je ne connais pas ce langage, d'autres qui utilisent illustrator mais c'est payant, ils extraient un code svg et l'intègre dans la page html etc...je ne sais pas c'est quoi le moyen le plus simple et très propre et si je fais ça à la main j'ai peur que ça soit une mauvaise qualité, pas les courbes mais le rendu final, genre image de mauvaise qualité, résolution etc. C'est pour ça je voulais juste tracé les courbes, j'intègre ma courbe et quand je fais background-color en css ça contourne et change le background en prenant en compte la courbe, je ne sais pas si c'est possible, sinon il y a des gens qui tapent 100 lignes de codes en css pour faire une vague et si y en a plusieurs c'est un peu compliqué.

Du coup je sais pas trop quoi utiliser.
Commenter la réponse de Nysen