• css+div打造三角形(箭头)


    在很多网站都见过这样的箭头,之前我一直以为是图片,直到今天才知道原来可以用css做。开始看代码没太看懂,后来自己试了几遍才恍然大悟。贴出来分享下。(大神请直接忽略)

    先看代码:

    HTML部分就是一个单纯的div。

    .sanjiao{
        width:0px;
        height:0px;
        overflow:hidden;
        border-width:10px;
        border-color:transparent transparent blue transparent;
        border-style:dashed dashed solid dashed;
    }

    咋一看我确实没明白原因。(看懂的后面可以忽略)

    *****************************************************************************************************************

    一步步分析:

    1、画div

    .sanjiao{
        width:30px;
        height:30px;
        background-color:black;
    }

    (这一步看不懂的麻烦回去复习css)

    2、给边框,分开给

    .sanjiao{
        width:30px;
        height:30px;
        background-color:black;
    
        border-top:solid red 20px;
        border-left:solid blue 20px;
        border-bottom:solid yellow 20px;
        border-right:solid green 20px;
    }

    (相信聪明的童靴马上就看明白了,我也是在这才明白)

    3、去掉中间的div

    .sanjiao{
        width:0;
        height:0;
    
        border-top:solid red 20px;
        border-left:solid blue 20px;
        border-bottom:solid yellow 20px;
        border-right:solid green 20px;
    }

    (是不是已经看懂了)

    4、优化代码

    .sanjiao{
        /* 设定div大小 */
        width:0;
        height:0;
        /* 防溢出,稳固兼容性 */
        overflow:hidden;
        /* 箭头尺寸 */
        border-width:10px;
        /* 给箭头着色,四个值分别是边框的四个方向,箭头的方向正好相反 */
        border-color:blue transparent transparent transparent;
        /* 为了兼容性,最好把四个值都补上,需要的方向设实线,其他方向虚线 */
        border-style:solid dashed dashed dashed;
    }

    搞定,最后的优化注释已经很详细了。

    看到这儿还看不懂,不好意思 请找地儿充值IQ。

  • 相关阅读:
    SQL 操作结果集 -并集、差集、交集、结果集排序
    MongoDB系列四:解决secondary的读操作
    org.apache.hadoop.ipc.RemoteException: User: root is not allowed to impersonate root
    hive 中窗口函数row_number,rank,dense_ran,ntile分析函数的用法
    FormData上传文件同时附带其他参数
    Hive删除分区
    Hive日期格式转换用法
    HIVE 不支持group by 别名
    ODS与EDW的区别
    hive数据类型转换、字符串函数、条件判断
  • 原文地址:https://www.cnblogs.com/MirageFox/p/5877599.html
Copyright © 2020-2023  润新知