CSS : Effacer un bout de bordure

[Sarc]

Bonjour,

J'aimerais supprimer un petit bout de la bordure sur une balise HTML. Vous avez des astuces CSS pour le faire sans avoir besoin d'afficher une image blanche par dessus ?

Je suppose que non, sinon les bordures arrondies deviendraient faciles à faire, mais sait-on jamais...

Merci d'avance pour ceux qui auraient des idées de Génie !

[captain_torche]

Que veux-tu dire, par "effacer un bout de bordure" ?

Tu souhaites conserver la bordure sur un élément, mais pas sur toute la hauteur ?

[Sarc]

Oui voilà... En fait, j'aimerais que la bordure commence à la moitié de l'élément par exemple, qu'à gauche de la moitié on ait une "bordure blanche", et à droite une bordure colorée...

En fait, je veux mettre un background-image qui rejoindrait la bordure à un endroit précis, mais là ça fait moche.

J'ai essayé de mettre le background-image avec des valeurs négatives, mais elle n'apparaît plus.

[captain_torche]

Tu pourrais poster un screen de ce que tu veux obtenir ?

Ca serait plus simple

[Sarc]

Je peux...

Pour faire simple, je veux passer de :

à

sans utiliser <img src>... (ie en utilisant uniquement les backgrounds en CSS)

J'ai essayé :

background:url("../images/fondmenu.gif") repeat-x 0 -10px;

Mais alors là, l'image sort du cadre de l'élément, donc elle est effacée...

Et la bordure reste.

Je suis sceptique, je pense que c'est impossible de toucher à un bout de la bordure, qui est extérieure à l'élément !

[captain_torche]

Le plus simple serait de faire deux éléments imbriqués, avec chacun leur image en background, du genre

<h1><span></span>Element</h1>

et comme CSS

h1 {
background: transparent url('img/pixel_mauve.gif') repeat-x left bottom;
}
h1 span {
width: /*largeur de ton image*/;
height: /*hauteur de ton image*/
background: transparent url('img/bordure.gif') no-repeat left bottom;
}

Avec comme images, un simple pixel mauve qui sera répété en bas du H1, et l'image de la pliure (avec un bout de soulignement, ou une transparence du côté droit)

Sinon, si ça te dérange trop d'avoir un span inutile, tu mets la pliure et le soulignement dans une seule image suffisamment grande pour gérer toutes les tailles de titre, et tu la mets en fond.

[Sarc]

Ouep, je vais faire ta deuxième méthode, elle me dérange carrément moins. A vrai dire, j'y avais même pas pensé... ><

Quel idiot !

Merci Captain !

[captain_torche]

Pas de quoi !