zoukankan      html  css  js  c++  java
  • css箭头

    直接上代码:
     
    <div class="box">        
        
        <p>向上箭头</p>       
        <div class="to_top"></div>       
        <p>向左箭头</p>        
        <div class="to_left"></div>        
        <p>向右箭头</p>        
        <div class="to_right"></div>        
        <p>向下箭头</p>        
        <div class="to_bottom"></div>    
        </div>
         

    html

    .box {            
     400px;            
    height: 100px;            
    text-align: center;            
    margin: 50px auto;        
    }         
    .box p {            
    background: pink;       
     }        
     /* 向上箭头 */         
    .to_top {            
     0;            
    height: 0;            
    border-bottom: 30px solid #f0f;            
    border-left: 30px solid transparent;            
    border-right: 30px solid transparent;        
    }        
     /* 向左箭头 */         
    .to_left {            
     0;            
    height: 0;            
    border-right: 30px solid #ffd900;            
    border-top: 30px solid transparent;            
    border-bottom: 30px solid transparent;        
    }         
    /* 向右箭头 */         
    .to_right {            
     0;            
    height: 0;            
    border-left: 30px solid greenyellow;            
    border-top: 30px solid transparent;            
    border-bottom: 30px solid transparent;        
    }         
    /* 向下箭头 */         
    .to_bottom {            
     0;            
    height: 0;            
    border-top: 30px solid skyblue;            
    border-left: 30px solid transparent;            
    border-right: 30px solid transparent;        
    }
    
    最终效果:

    当然你可以根据你的需求调整箭头的方向,颜色,大小等参数。
    ————————————————
     
     
     
    版权声明:本文为CSDN博主「wei_bo_ren」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/github_37772805/article/details/78535116
     
     
     
     
     
  • 相关阅读:
    高质量c/c++编程(10)
    .net 访问excel问题
    高质量c/c++编程(9)
    C#排序算法 之 冒泡排序
    C#排序算法 之 希尔排序
    高质量c/c++编程附录
    C#排序算法 之 插入排序
    读《漂亮女上司》有感
    高质量c/c++编程(6)
    高质量c/c++编程(5)
  • 原文地址:https://www.cnblogs.com/strawberry-1/p/11518818.html
Copyright © 2011-2022 走看看