[CSS] Afficher juste les coins des bordures

Afficher juste les coins des bordures [CSS] - HTML/CSS - Programmation

Marsh Posté le 02-04-2006 à 13:21:10    

Bonjour :)  
 
Je voudrais obtenir le résultat suivant en CSS:

Code :
  1. _                     _
  2. |                      |
  3.          texte
  4.          texte
  5.          texte
  6. |_                   _|


(Si possible, sans utiliser d'images)
 
Auriez-vous une idée :whistle:  ?


---------------
Viendez sur le Newbie-Project et essayez le Newbie-Directory (nouveau)
Reply

Marsh Posté le 02-04-2006 à 13:21:10   

Reply

Marsh Posté le 02-04-2006 à 14:05:07    

Diviser en plusieures DIV ^^


---------------
‎Débuter la moo chez les moants@HFR | Nikon D800 | On ne fait pas un calin chaste à une pute !, Lapattefolle
Reply

Marsh Posté le 02-04-2006 à 14:20:37    

Dépendant de la largeur de ta boite. Tu peux mettre une image de la largeur de la boite, (donc le fond d'une div), puis une autre div contenant le texte, et encore une autre image.


---------------
Mains power can kill, and it will hurt the entire time you’re dying from it.
Reply

Marsh Posté le 02-04-2006 à 14:54:34    

arf... va falloir que je calcule alors :D


---------------
Viendez sur le Newbie-Project et essayez le Newbie-Directory (nouveau)
Reply

Marsh Posté le 02-04-2006 à 18:09:24    

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
  2.  
  3. <html> 
  4. <head> 
  5.     <title></title> 
  6.     
  7.     
  8.    <style type="text/css"> 
  9.    #bloc { 
  10.       position:relative; 
  11.       width:200px; 
  12.       height:100px; 
  13.       padding:6px; 
  14.    } 
  15.    #bloc .tl, #bloc .tr, #bloc .bl, #bloc .br { 
  16.       position:absolute; 
  17.       width:5px;  
  18.       height:5px; 
  19.       display:block; 
  20.       overflow:hidden; 
  21.       border: 1px solid black; 
  22.    } 
  23.    #bloc .tl { top:0; left:0; border-right:0; border-bottom:0;} 
  24.    #bloc .tr { top:0 ; right:0; border-bottom:0; border-left:0 } 
  25.    #bloc .bl { bottom:0 ; left:0; border-top:0; border-right:0 } 
  26.    #bloc .br { bottom:0 ; right:0; border-left:0; border-top:0} 
  27.    </style> 
  28. </head> 
  29.  
  30. <body> 
  31.  
  32. <div id="bloc"> 
  33. <b class="tl"></b><b class="tr"></b> 
  34. <b class="bl"></b><b class="br"></b> 
  35. texte a la con 
  36.  
  37.  
  38. </div> 
  39.  
  40.  
  41. </body> 
  42. </html>

Reply

Marsh Posté le 02-04-2006 à 19:11:27    

Ca marche parfaitement, merci ;)


---------------
Viendez sur le Newbie-Project et essayez le Newbie-Directory (nouveau)
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed