Posted By

bigheadlyf on 04/15/09


Tagged

css corner


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

rickfu


Anti-Aliased CSS CORNER


 / Published in: CSS
 

  1. <!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <title>Anti-Aliased CSS CORNER</title>
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8">
  6. </head>
  7. <style>
  8. .c{border:1px solid #333;position:relative;height:50px;width:150px;}
  9. .rb_tl{background:#fff;height:5px;width:5px;overflow:hidden;position:absolute;top:-1px;left:-1px;}
  10. .rb_tl div{height:1px;width:1px;overflow:hidden;position:absolute;background:#333;}
  11. .rb_tr{background:#fff;height:5px;width:5px;overflow:hidden;position:absolute;top:-1px;left:146px;}
  12. .rb_tr div{height:1px;width:1px;overflow:hidden;position:absolute;background:#333;}
  13. .rb_bl{background:#fff;height:5px;width:5px;overflow:hidden;position:absolute;top:46px;left:-1px;}
  14. .rb_bl div{height:1px;width:1px;overflow:hidden;position:absolute;background:#333;}
  15. .rb_br{background:#fff;height:5px;width:5px;overflow:hidden;position:absolute;top:46px;left:146px;}
  16. .rb_br div{height:1px;width:1px;overflow:hidden;position:absolute;background:#333;}
  17. </style>
  18. <body>
  19. <div class="c">
  20. <div class="rb_tl">
  21. <div style="top:4px;left:0px;filter:alpha(opacity=70);-moz-opacity:0.7;"></div>
  22. <div style="top:3px;left:1px;filter:alpha(opacity=70);-moz-opacity:0.7;"></div>
  23. <div style="top:2px;left:1px;"></div>
  24.  
  25. <div style="top:1px;left:2px;"></div>
  26. <div style="top:1px;left:3px;filter:alpha(opacity=70);-moz-opacity:0.7;"></div>
  27. <div style="top:0px;left:4px;filter:alpha(opacity=70);-moz-opacity:0.7;"></div>
  28.  
  29. <div style="top:3px;left:0px;filter:alpha(opacity=40);-moz-opacity:0.4;"></div>
  30. <div style="top:0px;left:3px;filter:alpha(opacity=40);-moz-opacity:0.4;"></div>
  31.  
  32. <div style="top:4px;left:1px;filter:alpha(opacity=20);-moz-opacity:0.2;"></div>
  33. <div style="top:1px;left:4px;filter:alpha(opacity=20);-moz-opacity:0.2;"></div>
  34.  
  35. <div style="top:1px;left:1px;filter:alpha(opacity=10);-moz-opacity:0.1;"></div>
  36. <div style="top:2px;left:2px;filter:alpha(opacity=50);-moz-opacity:0.5;"></div>
  37. </div>
  38. <div class="rb_tr">
  39. <div style="top:4px;left:4px;filter:alpha(opacity=70);-moz-opacity:0.7;"></div>
  40. <div style="top:3px;left:3px;filter:alpha(opacity=70);-moz-opacity:0.7;"></div>
  41. <div style="top:2px;left:3px;"></div>
  42.  
  43. <div style="top:1px;left:2px;"></div>
  44. <div style="top:1px;left:1px;filter:alpha(opacity=70);-moz-opacity:0.7;"></div>
  45. <div style="top:0px;left:0px;filter:alpha(opacity=70);-moz-opacity:0.7;"></div>
  46.  
  47. <div style="top:3px;left:4px;filter:alpha(opacity=40);-moz-opacity:0.4;"></div>
  48. <div style="top:0px;left:1px;filter:alpha(opacity=40);-moz-opacity:0.4;"></div>
  49.  
  50. <div style="top:4px;left:3px;filter:alpha(opacity=20);-moz-opacity:0.2;"></div>
  51. <div style="top:1px;left:0px;filter:alpha(opacity=20);-moz-opacity:0.2;"></div>
  52.  
  53. <div style="top:1px;left:3px;filter:alpha(opacity=10);-moz-opacity:0.1;"></div>
  54. <div style="top:2px;left:2px;filter:alpha(opacity=50);-moz-opacity:0.5;"></div>
  55. </div>
  56. <div class="rb_bl">
  57. <div style="top:0px;left:0px;filter:alpha(opacity=70);-moz-opacity:0.7;"></div>
  58. <div style="top:1px;left:1px;filter:alpha(opacity=70);-moz-opacity:0.7;"></div>
  59. <div style="top:2px;left:1px;"></div>
  60.  
  61. <div style="top:3px;left:2px;"></div>
  62. <div style="top:3px;left:3px;filter:alpha(opacity=70);-moz-opacity:0.7;"></div>
  63. <div style="top:4px;left:4px;filter:alpha(opacity=70);-moz-opacity:0.7;"></div>
  64.  
  65. <div style="top:1px;left:0px;filter:alpha(opacity=40);-moz-opacity:0.4;"></div>
  66. <div style="top:4px;left:3px;filter:alpha(opacity=40);-moz-opacity:0.4;"></div>
  67.  
  68. <div style="top:0px;left:1px;filter:alpha(opacity=20);-moz-opacity:0.2;"></div>
  69. <div style="top:3px;left:4px;filter:alpha(opacity=20);-moz-opacity:0.2;"></div>
  70.  
  71. <div style="top:3px;left:1px;filter:alpha(opacity=10);-moz-opacity:0.1;"></div>
  72. <div style="top:2px;left:2px;filter:alpha(opacity=50);-moz-opacity:0.5;"></div>
  73. </div>
  74. <div class="rb_br">
  75. <div style="top:0px;left:4px;filter:alpha(opacity=70);-moz-opacity:0.7;"></div>
  76. <div style="top:1px;left:3px;filter:alpha(opacity=70);-moz-opacity:0.7;"></div>
  77. <div style="top:2px;left:3px;"></div>
  78.  
  79. <div style="top:3px;left:2px;"></div>
  80. <div style="top:3px;left:1px;filter:alpha(opacity=70);-moz-opacity:0.7;"></div>
  81. <div style="top:4px;left:0px;filter:alpha(opacity=70);-moz-opacity:0.7;"></div>
  82.  
  83. <div style="top:1px;left:4px;filter:alpha(opacity=40);-moz-opacity:0.4;"></div>
  84. <div style="top:4px;left:1px;filter:alpha(opacity=40);-moz-opacity:0.4;"></div>
  85.  
  86. <div style="top:0px;left:3px;filter:alpha(opacity=20);-moz-opacity:0.2;"></div>
  87. <div style="top:3px;left:0px;filter:alpha(opacity=20);-moz-opacity:0.2;"></div>
  88.  
  89. <div style="top:3px;left:3px;filter:alpha(opacity=10);-moz-opacity:0.1;"></div>
  90. <div style="top:2px;left:2px;filter:alpha(opacity=50);-moz-opacity:0.5;"></div>
  91. </div>
  92. <div>
  93. Anti-Aliased CSS CORNER
  94. </div>
  95. </div>
  96. </body>
  97. </html>

Report this snippet  

You need to login to post a comment.