• 用css写三角形,宽高可设置


    1.不传@h,@c === @h;
    2.元素width = @w, 元素height = @h*2
    3.配合上.center()实现图标居中

    less版本:

    //上下左右居中
    .center(){
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    
    //三角形
    //方向,颜色,宽度,高度
    .triangle(right, @c, @w, @h: @w){
        border-left: @w solid @c;
        border-right: none;
        border-top: @h solid transparent;
        border-bottom: @h solid transparent;
    }
    .triangle(left, @c, @w, @h: @w){
        border-left: none;
        border-right: @w solid @c;
        border-top:@h solid transparent;
        border-bottom: @h solid transparent;
    }
    .triangle(bottom, @c, @w, @h: @w){
        border-left: @h solid transparent;
        border-right: @h solid transparent;
        border-top: @w solid @c;
        border-bottom: none;
    }
    .triangle(top, @c, @w, @h: @w){
        border-left: @h solid transparent;
        border-right: @h solid transparent;
        border-top: none;
        border-bottom: @w solid @c;
    }

    css版本:

        border-left: none;
        border-right: 6px solid #627387;
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        content: '';
        display: block;
  • 相关阅读:
    echo -e的用法
    nc ip 22
    /pentest/backdoors/3proxy
    /usr/local/sbin/arpspoof
    tcpick
    nginx服务报403错误的解决方法
    linux上部署thinkphp5提示500
    修改文件夹的所有者为www
    Host xxx is not allowed to connect to this MariaDb server
    解决Linux 下 root用户删除文件提示:Operation not permitted
  • 原文地址:https://www.cnblogs.com/wenwenwei/p/10017856.html
Copyright © 2020-2023  润新知