Les coins pas pointu ??

Anonyme

11 décembre 2005 à 14:51:38

Salut Salut !

Bon alors je voudrais faire ca:
Image utilisateur

Vous voyez le coin du cadre blanc avec l'image dedans ? et bin il est pas pointu ... la il est fait avec une image mais comme c'est un peu chian pour un site je voudrais le faire avec du css ... Comment m'y prendre ??

Quels autre type de coin est-il possible de faire avec le css ?

Merci d'avance !!!

aimak

11 décembre 2005 à 14:56:18

tag {
-moz-border-radius: 5 px;
}

Ne fonctionne que sous mozilla.
++
aimak

Megashadow

11 décembre 2005 à 15:18:43

Moi aussi sa m'interesse mais je voudrai une balise qui marcherait avec tout les navigateur si possible.

Merci d'avance !

Jokester

11 décembre 2005 à 15:19:19

essayes avec des calques et des fonds qui coupent les coins avec des
background-position: X% X%; (ou px)

Anonyme

11 décembre 2005 à 15:46:26

Heu ... désolé mais je vois pas ce que tu veux dire

Jokester

11 décembre 2005 à 19:30:28

Et bien, c'est juste une idée, mais si tu fais:
- un div(1) avec ton image en background
- un div(2) avec un background positionné en 0px; 0px;
Avec le div 2 par dessus le 1 (propriété z-index pour la disposition des plans)
si tu veux couper tous les coins de ton image, tu devras ajouter trois calques(div), en positionnant les trois background avec respectivement 100% 0px; 0px 100%; 100% 100%.

Le plus simple est, je pense de couper ton image. Parce qu'ajouter 4 images de coins par dessus une image, c'est pas forcément une solution économe, ou d'une application facile

Si tu veux plus d'explication (j'ai comme l'impression d'être très confu

) n'hésite pas,

Jokester

Raphael

11 décembre 2005 à 23:28:02

Citation : aimak

tag {
-moz-border-radius: 5 px;
}

Ne fonctionne que sous mozilla.

... pour l'instant

Car border-radius fait partie de CSS2.1

Gamer_man

11 décembre 2005 à 23:38:24

Tu fais une image pour chaque coin, du genre :

div#conteneur{
width: 400px;
}

div#conteneur div#haut_gauche,
div#conteneur div#bas_gauche{
float: left;
}

div#conteneur div#haut_droite,
div#conteneur div#bas__droite{
float: right;
}

div#conteneur div#haut_gauche,
div#conteneur div#bas_gauche,
div#conteneur div#haut_droite,
div#conteneur div#bas__droite{
width: 50px;
height: 50px;
background-repeat: no-repeat;
}

div#conteneur div#haut_gauche {background-image: url('images/haut_gauche.png');}
div#conteneur div#haut_droite {background-image: url('images/haut_droite .png');}
div#conteneur div#bas_gauche {background-image: url('images/bas_gauche.png');}
div#conteneur div#bas_droite {background-image: url('images/bas_droite.png');}

div#conteneur p{
clear: both;
}

Bisous

fg63

12 décembre 2005 à 16:33:32

Et comment faire si
on veut, en plus, que la bordure
soit en pointillés par exemple
???

Gamer_man

12 décembre 2005 à 17:50:16

T'as lu ma réponse ?

Bisous

Anonyme

12 décembre 2005 à 18:07:58

Oui oui ! Je suis en trin de la tester

Sa m'a lair très bien !

Edit: Merci a tous biensur !

2ème Edit: Aprés testage j'approuve ! Super bravo ! Merci a toi ! Et encore merci a tous ceux qui on répondu !

Gamer_man

12 décembre 2005 à 18:43:18

En CSS 3 tu pourras utiliser une seule image pour faire cela