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;
  • 相关阅读:
    Sql优化思路
    「网络流随想随记」
    「ZJOI 的部分题解整理」
    「循环矩阵相关的一些东西」
    知识蒸馏
    3D Human Pose Estimation with 2D Marginal Heatmaps
    模型剪枝
    目标检测小网络
    selenium---解决clear方法失效
    selenium---快速跳转到指定元素
  • 原文地址:https://www.cnblogs.com/wenwenwei/p/10017856.html
Copyright © 2011-2022 走看看