Intégration d'un cadre à bord arrondi

[-Fly-]

Bonjour ,

Voilà j'aimerais intégrer un menu arrondi que j'ai dessiné sur photoshop .
J'ai donc décidé de prendre trois images l'une pour le haut, une pour le centre qui se répète et une pour le bas

Code css :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#main #cadre{	
        height:200px;
	background-image: url(./cadrecentre.png);
	background-repeat:repeat-y;
	margin-bottom:20px;
 
}
 
#main #cadre .cadre1{
	background-image: url(./cadrehaut.png);
	background-repeat: no-repeat;
}
 
#main #cadre .cadre2{	
	background-image: url(./cadrebas.png);
	background-repeat: no-repeat;
	background-position: bottom left;
}

Comme ceci, avec un code html ici

Code html :

1
2
3
4
5
6
<div id="cadre">
		<div class="cadre1">
			<div class="cadre2">			
			</div>	
		</div>
	</div>

Le problème est que le centre ne se répète pas bien, il écrase la partie du haut et du bas.


Avez vous une technique simple pour intégrer les cadres arrondis ?? Comment dois je procéder ?

Merci !

[Bovino]

Dans les cours CSS...
Créez des coins arrondis en CSS pour vos blocs (X)HTML
Créer des coins arrondis à l'aide de Sprites CSS

[-Fly-]

ok , merci

[kirua99]

Bonjour,

Tu as deux methodes:
- Soit tu une fonction du css3

Code :

1
2
3
4
 
#cadre { 
  border-radius: 10px; 
}

- Soit tu utilises une image arrondi sous gimp / photoshop.