Réaliser des coins arrondis

**laurentSc** · 30/01/2013, 20h28

Bonsoir,

ce sujet a été largement traité ; cela dit, comme je souhaite réaliser ça le plus simplement possible, après une petite recherche, je me suis intéressé à border-radius, ai trouvé un code qui semble faire ça, mais si je refais pareil avec ce code, ça ne marche pas ; pourquoi ?

Code html :

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
32
33
34
35
36
37
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
 
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
      body {
        padding: 50px;
      }
      div {
        width: 450px;
        padding: 10px;
        background: #ccc;
      }
      div.arrondi {
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
      }
      
 
    </style>
    <!--[if lte IE 8]><script type="text/javascript" src="script/roundies.js"></script><![endif]-->
 
    <title>des coins arrondis en CSS3 sans images</title>
  </head>
 
 
  <body>
 
  <div class="arrondi">
    <p>ici un bloc arrondi</p>
  </div>
 
  </body>
 
</html>

**laurentSc** · 31/01/2013, 00h20

J'ai finalement trouvé une méthode qui marche (sous IE8) :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="gauche">
 <div id="droite">
  <div id="haut">
   <div></div>
  </div><!-- /haut -->
  <h2>Lorem ipsum</h2>
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
  Mauris vulputate laoreet urna. Integer magna. 
  Donec facilisis lectus sed quam. 
  Curabitur sit amet lacus id lacus facilisis venenatis.
  </p>
 </div><!-- /droite -->
</div><!-- /gauche -->

et

Code css :

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
#gauche {
background:#E4EFFF url(images/fond-arrondi.png) no-repeat bottom left;
margin:auto;
max-width:2007px;
}
#droite {
background:#E4EFFF url(images/fond-arrondi.png) no-repeat bottom right;
margin-left:7px;
padding-bottom:20px;
}
#haut {
background:#E4EFFF url(images/fond-arrondi.png) no-repeat top right;
margin-left:-7px;
padding:0;
}
#haut div {
background:#E4EFFF url(images/fond-arrondi.png) no-repeat top left;
height:7px;
width:7px;
}
p, h2 {
padding:5px 10px;
margin:0;
}

**JefReb** · 31/01/2013, 10h21

Avez-vous essayé PIE.htc?
http://css3pie.com/
code CSS

Code :

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

1
2
3
4
5
6
div.arrondi {
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
        behavior: url(PIE.htc);
      }

Il y a aussi les générateur de coins arrondis:
http://www.supportduweb.com/generate...rner-code.html

En espérant que cela vous aide ...

Réaliser des coins arrondis

CSS

Discussions similaires

Partager

Partager