Discussion :

[minilaure]

Bonjour,
Je souhaite créer un triangle avec les bouts arrondis grâce au CSS.
Comme cette photo, avec peut-être même les coins plus arrondis si possible.

Après des heures passées à faire des essais en tout genre, et chercher sur des forums un code qui pourrait m'aider à créer cette forme je commence à être désespérée ...

Si quelqu'un pouvait m'aider ou au moins me donner une piste de réflexion, je lui en serais très reconnaissante!
Merci

[ibrakola]

Bonjour,
je te propose ce lien:
http://debray-jerome.developpez.com/...trie-avec-css/

[Torgar]

Après je ne suis pas certain qu'il soit possible d'arrondir les sommets du triangle.

Le plus simple reste l'image si tu souhaites vraiment des arrondis.

Voici un autre exemple de triangle en CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
#triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid blue;
}

Joue avec les différentes valeurs pour comprendre comment ça fonctionne.

En modifiant la largeur tu crées un trapèze par exemple.

[NoSmoking]

Bonjour,

Le plus simple reste l'image si tu souhaites vraiment des arrondis.

qui plus est la compatibilité sera totale.

[laffreuxthomas]

Peut-être une occasion d'utiliser le format SVG ?

[Torgar]

Idem, pour une compatibilité totale, le mieux reste l'image.

Nativement, à ce que j'ai pu voir vite fait sur le net, le SVG n'est pas supporté par IE < 9.

[minilaure]

Merci beaucoup pour vos réponses!
Je vais essayer la technique de l'image comme vous me le conseillez, cela semble beaucoup plus facile que de continuer à tenter d'arrondir les angles d'un triangle en CSS!

Encore une fois merci d'avoir pris le temps de me répondre