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
     
     
     
     
     
  • 相关阅读:
    yum安装8.0mysql数据库
    free命令详细介绍
    linux 自定义美女欢迎界面
    shll脚本常用格式和规则使用
    liunx常用知识基本命令大全
    liunx系统二进制包安装编译mysql数据库
    CentOS7更改网卡名称
    老男孩教育100道面试题
    非关系型数据库(NoSQL)
    iptables
  • 原文地址:https://www.cnblogs.com/strawberry-1/p/11518818.html
Copyright © 2011-2022 走看看