查看: 402|回复: 0

[DIV/CSS] 利用CSS3新特性创建透明边框三角

发表于 2017-11-30 08:00:01

先来看一下效果,这在CSS3之前,完全是不可想象的,只有图片才能做的到,但在HTML5和CSS3大行其道的今天,实现这种效果,那都不是事啊。

看一下实现的代码:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style type='text/css'>
  5. /* 上三角 */
  6. .arrow-up {
  7. width: 0;
  8. height: 0;
  9. border-left: 20px solid transparent;
  10. border-right: 20px solid transparent;
  11. border-bottom: 20px solid green;
  12. }
  13. /* 下三角 */
  14. .arrow-down {
  15. width: 0;
  16. height: 0;
  17. border-left: 20px solid transparent;
  18. border-right: 20px solid transparent;
  19. border-top: 20px solid orange;
  20. }
  21. /* 右三角 */
  22. .arrow-right {
  23. width: 0;
  24. height: 0;
  25. border-top: 60px solid transparent;
  26. border-bottom: 60px solid transparent;
  27. border-left: 60px solid blue;
  28. }
  29. /* 左三角 */
  30. .arrow-left {
  31. width: 0;
  32. height: 0;
  33. border-top: 10px solid transparent;
  34. border-bottom: 10px solid transparent;
  35. border-right: 10px solid silver;
  36. }
  37. </style>
  38. </head>
  39. <body>
  40. <div class="arrow-up"></div>
  41. <div class="arrow-down"></div>
  42. <div class="arrow-left"></div>
  43. <div class="arrow-right"></div>
  44. </body>
  45. </html>
复制代码



回复

使用道具 举报

关闭

站长推荐上一条 /1 下一条