• 箭头的制作


    在写页面的时候我们总会遇见各式各样的箭头,但是自己写的又不那么美观,所以说我们自己可以用css画箭头,以下是我们要画的箭头,就画简单的吧左右箭头

    1 <div class="box">
    2     <div class="arrow-right arrow-box">
    3         <b class="right"><i class="right-arrow1"></i><i class="right-arrow2"></i></b>
    4     </div>
    5     <div class="arrow-left arrow-box" >
    6         <b class="left"><i class="left-arrow1"></i><i class="left-arrow2"></i></b>
    7     </div>
    8 </div>

    css的样式

     1 .box{width:100px;height:500px;margin:0 auto;background:white;}
     2 .arrow-box{width:30px;height:30px;margin:20px auto;position:relative;}
     3 /*右箭头*/
     4 .right{width:20px;height:20px;position:absolute;left:0;top:0;}
     5 .right-arrow1,.right-arrow2{width:0;height:0;display:block;position:absolute;left:0;top:0;border-top:10px transparent dashed;border-right:10px transparent dashed;border-bottom:10px transparent dashed;border-left:10px white solid;overflow:hidden;}
     6 .right-arrow1{left:1px;border-left:10px #ddd solid;}
     7 .right-arrow2{border-left:10px white solid;}
     8 /*左箭头*/
     9 .left{width:20px;height:20px;position:absolute;left:0;top:0;z-index: 2;}
    10 .left-arrow1,.left-arrow2{width:0;height:0;display:block;position:absolute;left:0;top:0;z-index:5;border-top:10px transparent dashed;border-left:10px transparent dashed;border-bottom:10px transparent dashed;border-right:10px white solid;overflow:hidden;}
    11 .left-arrow1{border-right:10px #ddd solid;}
    12 .left-arrow2{left:1px;border-right:10px white solid;}

    简单的写了两个,上下箭头原理是一样的

  • 相关阅读:
    完全卸载mysql数据库图文教程
    软件测试 (一) 软件测试方法大汇总(转)
    html笔记之常用标签
    前端之HTML简介<一>
    java笔记之对象的克隆
    java笔记之网络知识--—TCP
    Vue组件通信中事件总线(eventBus)的使用
    React项目之antd-4.0中Form表单的数据获取
    React项目中使用antd遇坑——icon组件的使用
    常见面试题——['1','2','3'].map(parseInt)
  • 原文地址:https://www.cnblogs.com/caixiufang/p/6958176.html
Copyright © 2020-2023  润新知