Onglets a arrondis spéciaux

Hello tout le monde !

J'aimerais faire des onglets un peu spéciaux mais je ne voient pas du tout comment faire...

J'aimerais réaliser le même arrondis à droite que celui sur l'image ci-dessous :



Si quelqu'un a une idée, merci

Le plus simple c'est une image.

Sois tu fait toit même l'image (photoshop ou autres) sois tu fais un border-radius mais sa marche pas sous IE...

J'ai un énooooooooorme doute sur le border-radius dans ce cas précis : c'est bien pourarrondir les angles, mais est-ce qu'on peut arrondir vers l'exterieur en mettant un nombre de px negatifs ?

Je dis peut être une bêtise, mais je crois que lorsque l'on met deux valeurs d'affiler

ex :

border-radius : 0px 20px 0px 0px 0px 100px 0px 0px;

ou

border-radius : 0px 0px 20px 100px 0px 0px 0px 0px;

Enfin quelque chose du genre ça permet de faire un angle de ce genre il me semble ... il faudrait que je retrouve le site où j'ai vue ça

J'ai déjà testé les border-radius mais comme là dis justement quelqu'un, ça fait toujours un effet bombé sur l'arrondi.

Quant à la méthode de cumuler 2 fois les valeurs, ça ne fonctionne pas du tout chez moi.

Merci pour votre aide

Là si on ne veut pas utiliser une image bitmap il faut passer par un tracé vectoriel hein. Donc une image de fond en SVG (à voir pour le support dans les navigateurs).

Pour la compatibililté tous navigateurs, il faudrait faire une image.

J'ai bien une autre solution en tête, mais IE ne la prendra pas en compte.

Si tu as une autre idée je suis preneur puisque c'est pour une application web pour chrome (donc IE je m'en contre fiche, et croyez moi, c'est le pied de ne pas s'occuper des autres navs )
Modifié par Jordy9 (15 Jun 2012 - 10:29)

Hello.

Avec des pseudo-éléments, et la syntaxe avec deux radius, ça doit pouvoir se jouer.

Ça risque d'être bien bien chiant avec le dégradé, mais ça se tente.

Florian_R a écrit :
Avec des pseudo-éléments

Enorme !!