当前位置:Gxlcms > css > 如何用css制作一个能够兼容所有浏览器的三角形

如何用css制作一个能够兼容所有浏览器的三角形

时间:2021-07-01 10:21:17 帮助过:69人阅读

这篇文章主要介绍了如何用css制作一个能够兼容所有浏览器的三角形,有一定的参考价值,感兴趣的朋友可以参考一下,希望对你有所帮助!

利用css写三角形,兼容IE7

  1. .arrow-up {
  2. width:0px;
  3. height:0px;
  4. border-left:10px solid transparent;
  5. border-right:10px solid transparent;
  6. border-bottom:10px solid red;
  7. font-size:0px;
  8. line-height:0px;
  9. margin: 0 auto;
  10. }
  11. .arrow-down {
  12. width:0px;
  13. height:0px;
  14. border-left:10px solid transparent;
  15. border-right:10px solid transparent;
  16. border-top:10px solid blue;
  17. font-size:0px;
  18. line-height:0px;
  19. }
  20. .arrow-left {
  21. width:0px;
  22. height:0px;
  23. border-bottom:10px solid transparent;
  24. border-top:10px solid transparent;
  25. border-right:10px solid #DC143C;
  26. font-size:0px;
  27. line-height:0px;
  28. }
  29. .arrow-right {
  30. width:0px;
  31. height:0px;
  32. border-bottom:10px solid transparent;
  33. border-top:10px solid transparent;
  34. border-left:10px solid #FF00FF;
  35. font-size:0px;
  36. line-height:0px;
  37. }

效果如下:

aaaaa.jpg

以上就是本文的全部内容了,希望大家能够喜欢。

【相关教程推荐】

1. CSS视频教程
2. CSS在线手册
3. bootstrap教程

人气教程排行