zoukankan      html  css  js  c++  java
  • CSS 三角形

    效果:

    Test Text
    实现代码:
    1. <div>
    2. <span class="arraw down"></span>
    3. <span class="arraw up"></span>
    4. <span class="arraw left"></span>
    5. <span class="arraw right"></span>
    6. Test Text
    7. </div>
     样式代码:
    1. .arraw{
    2. display: inline-block;
    3. width: 0px;
    4. height: 0px;
    5. }
    6. .down{
    7. border-top: 12px solid #000;
    8. border-right: 6px solid transparent;
    9. border-left: 6px solid transparent;
    10. border-bottom: 0px solid #000;
    11. }
    12. .up{
    13. border-bottom: 12px solid #000;
    14. border-right: 6px solid transparent;
    15. border-left: 6px solid transparent;
    16. border-top: 0px solid #000;
    17. }
    18. .left{
    19. border-right: 12px solid #000;
    20. border-top: 6px solid transparent;
    21. border-bottom: 6px solid transparent;
    22. border-left: 0px solid #000;
    23. }
    24. .right{
    25. border-left: 12px solid #000;
    26. border-top: 6px solid transparent;
    27. border-bottom: 6px solid transparent;
    28. border-right: 0px solid #000;
    29. }




  • 相关阅读:
    第二阶段团队绩效评分
    团队冲刺2.9
    团队冲刺2.8
    团队冲刺2.7
    团队冲刺2.6
    团队冲刺2.5
    项目总结以及事后诸葛亮会议
    做什么都队第二阶段绩效评估
    第二阶段冲刺第十天
    第二阶段冲刺第九天
  • 原文地址:https://www.cnblogs.com/ybst/p/5056802.html
Copyright © 2011-2022 走看看