Discussion :

[xxkirastarothxx]

Bonjour à tous,

Après pas mal de recherche, j'ai enfin réussi à faire un div avec les bordures arrondies; et je parle bien des bordures, non des coins.
Bon, le rendu n'est pas super, un peu pixelisé, mais je devrais pouvoir m'en contenter, et avec des effet d'ombre cela devrait s'atténuer.

Là ou je bloque, c'est pour rajouter le même effet mais sur les autres bordures de ce div (au bottom, tout du moins).
Je me disais qu'en ajoutant une deuxième instance -moz-radial-gradient ça aurait pu le faire, mais apparemment non

Il faut dire que je suis pas un bête en CSS3, donc si vous avez des idées, je suis preneur

Voici mon code actuel:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<style>
body {
    padding: 10px;
    background: url(http://static.myopera.com/community/graphics/speeddials/Opera-Background-Clouds.jpg) top left repeat;
}
 
#b {
    width: 200px;
    padding-left: 30px;
 
    background-image:
		-moz-radial-gradient(
			50% -430px, /* the -23px left position varies by your "gap" */
 
			circle closest-corner, /* keep radius to half height */
			transparent 0, /* transparent at center */
			transparent 450px, /*transparent at edge of gap */
			grey 451px /* end circle border and begin color of rest of background */
	);
 
    border:0;
    display: inline-block;    
    position: relative;    
    height: 100px;
    text-align: center;
    line-height: 100px;
    vertical-align: middle;
}
</style>
 
<div id="b" class="inversePair">B</div>

Merci beaucoup


PS: J'ai déjà pensé utiliser d'autre "feinte", comme utiliser une image, mais cela ne peut pas fonctionner par rapport à ce que j'ai a faire.

pour le détails: j'ai un site, dans lequel je dois placer un slideshow d'images (existantes), et ces dernières doivent-être arrondie vers l'interieur en haut et en bas. Le background du site est un peux particulier (dynamique), c'est pourquoi utiliser une image comme "calque" afin de tronquer les images du slideshow serait un peu compliqué, pour ne pas dire impossible.

[Muchos]

j'ai enfin réussi à faire un div avec les bordures arrondies; et je parle bien des bordures, non des coins.

Radial Gradient (CSS3) n'arrondit pas les bordures. Il crée une forme arrondie, que vous avez superposée à votre div en lui donnant une transparence.
Il faut donc refaire une autre forme arrondie transparente, mais cette fois-ci en bas de la div.

[v1cent]

bordure arrondie vers l'intérieur ce n'est pas prévu en effet (enfin je crois pas)

tu peut encadrer ton élément avec 4 autres éléments, qui auront une bordure vers l'extérieur à chaque fois dans le bon sens (border-radius à 100%) ...
Il faut bien gérer les positionnements et tailles.

c'est super tordu

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<div class="conteneur">
    <div class="bordureArrondieBas">
    </div>
    <div class="centre">
        <div class="bordureArrondieDroite">
        </div>
        <div>Ton contenu (enfin)</div>
        <div class="bordureArrondieGauche">
        </div>
    </div>
    <div class="bordureArrondieHaut">
    </div>
</div>