zoukankan      html  css  js  c++  java
  • 用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;
  • 相关阅读:
    sqlalchemy
    tornado-模板继承extend,函数和类的导入
    vi规范
    Spark 分布式SQL引擎
    Spark SQL 编程
    Spark SQL 基本原理
    spark SQL概述
    spark 多语言编程
    hadoop YARN
    spark 存储管理机制
  • 原文地址:https://www.cnblogs.com/wenwenwei/p/10017856.html
Copyright © 2011-2022 走看看