18041 sujets

Questions générales et questions de débutants

[Résolu] Un seul coin arrondi avec ie7

Bonjour,

Je souhaiterais que les div d'une page aient un seul de leurs quatre coins arrondi et une ombre de type box shadow.
Pie.htc ne marche hélas qu'avec les quatre coins et roundies ne permet pas d'avoir d'ombre.

La page doit pouvoir être lue par ie7 et supérieurs.
Ne voulant pas alourdir le code html pour les navigateurs "compatibles" css3, faut-il encadrer en jquery (uniquement avec ie) ma div par d'autres div auxquelles j’appliquerais des images de fond?

Si vous avez une solution moins bulldozer, je suis preneur.
Modifié par adrien881 (03 Feb 2012 - 00:04)
Ah moi je l'utilise parce que c'est ce qui plante avec les before et after autre chose que les a mais oui tu as raison, pour radius rien à voir < Smiley saoul

Chez moi PIE.htc marche impec, donc soit tu as mal renseigné le chemin (en absolu) soit tu peux essayer les versions js et php de PIE pour ton souci.
jmlapam a écrit :
Chez moi PIE.htc marche impec.

As-tu essayé avec un seul coin, car chez moi en écrivant 
div{
	border: thin solid black;
	width:100px;
	height:100px;
	-webkit-border-top-right-radius: 8px;
	-moz-border-top-right-radius: 8px;
	border[#red]-top-right[/#]-radius: 8px;
	behavior: url(/PIE.htc);
}


ça ne marche pas.

Si un .htc peut arrondir 4 angles, cela devrait être techniquement possible d'en arrondir qu'un seul.
Essaie ceci:
div{

	border: thin solid black;

	width:100px;

	height:100px;

	-webkit-border-radius:0 8px 0 0 ;

	-moz-border-radius:0 8px 0 0 ;

	border-radius:0 8px 0 0;

	behavior: url(/PIE.htc);

}


au passage, tu peux rajouter les équivalents khtml et opera si tu veux.
Modifié par jmlapam (02 Feb 2012 - 16:23)
Bonjour,

@jmlapam ton code m’arrondit les 4 coins. Je ne veux arrondir que le coin supérieur gauche.

Quelqu’un connaitrait-il un clone de PIE qui permette d’arrondir un seul coin et non les 4 ?

j’arrive à ce code. Il marche mais nécessite une image et ce n’est pas très satisfaisant :

<!DOCTYPE html>

<html lang="fr">
<head>
  <meta charset="UTF-8">

  <title></title>

  <style>
    div.cadre {
		-moz-box-shadow:darkGray 3px 3px 3px;
		-webkit-box-shadow:darkGray 3px 3px 3px;
		-o-box-shadow:darkGray 3px 3px 3px;		
		-moz-border-top-left-radius:8px;
		-webkit-border-top-left-radius:8px;
		border:1px solid black;
		border-top-left-radius:8px;
		box-shadow:darkGray 3px 3px 3px;
		padding:1em;
		position:absolute
	}
  </style>
<!--[if IE]>
  <style>
    .cadre {
		background:white;
		behavior: url(PIE.htc)
	}
	.cadre .cadreMilieu {
		margin:8px 0 0 8px
	}
	.cadre .cadreHautGauche {
		background:url("arrondi.png") red;
		height:8px;
		left:-1px;
		position:absolute;
		top:-1px;
		width:8px
	}
  </style>
<![endif]-->
</head>
<body>
<div class="cadre">
	Homme libre, toujours tu chériras la mer!
</div>
<!--[if IE]>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$('div.cadre').wrapInner('<div class="cadreMilieu"></div>');
	$('div.cadre').append('<div class="cadreHautGauche"></div>');
});
</script>
<![endif]-->
</body>
</html>

Modifié par adrien881 (02 Feb 2012 - 19:35)
adrien881 a écrit :

@jmlapam ton code m’arrondit les 4 coins. Je ne veux arrondir que le coin supérieur gauche.


Ah bon? pourtant je mets l'arrondi que sur le right. Smiley eek
Sujet clos
Aller à