css画三角形

Posted on Posted in css
Tips: 本文创建于2014年10月27日,已超过 2 年,内容或图片可能已经失效!

效果图

triangle

 

以下是代码

  1. <html>
  2. <head>
  3. <style?type="text/css">
  4. .triangle{
  5. height:0px;
  6. width:0px;
  7. border:50px?solid?#000;
  8. border-color:#f00?#000?#f0f?#00f;
  9. }
  10. .rightdirection
  11. {
  12. ????width:0;height:0;
  13. ????line-height:0;
  14. ????border-width:50px;
  15. ????border-style:solid;
  16. ????border-color:transparent?transparent?transparent?#00f;
  17. }
  18. .bottomdirection
  19. {
  20. ????width:0;height:0;
  21. ????line-height:0;
  22. ????border-width:50px;
  23. ????border-style:solid;
  24. ????border-color😕#f00?transparent?transparent?transparent;
  25. }
  26. .leftdirection
  27. {
  28. ????width:0;height:0;
  29. ????line-height:0;
  30. ????border-width:50px;
  31. ????border-style:solid;
  32. ????border-color😕transparent?#000?transparent?transparent;
  33. }
  34. .topdirection
  35. {
  36. ????width:0;height:0;
  37. ????line-height:0;
  38. ????border-width:50px;
  39. ????border-style:solid;
  40. ????border-color😕transparent?transparent?#f0f?transparent;
  41. }
  42. .bottomright{
  43. ????width:0;height:0;
  44. ????border:50px?solid?#000;
  45. ????border-color:#f00?#000?transparent?transparent;
  46. }
  47. </style>
  48. </head>
  49. <body>
  50. <div?class="triangle"></div>
  51. <br?/>
  52. <div?class="rightdirection"></div>
  53. <br?/>
  54. <div?class="bottomdirection"></div>
  55. <br?/>
  56. <div?class="leftdirection"></div>
  57. <br?/>
  58. <div?class="topdirection"></div>
  59. <br?/>
  60. <div?class="bottomright"></div>
  61. </body>
  62. </html>
» 转载请注明来源:若我若鱼 » css画三角形

Leave a Reply

Your email address will not be published. Required fields are marked *

1 × five =