zoukankan      html  css  js  c++  java
  • Sass mixin 使用css border属性画三角形

    To be finished.

    //triangle
    @mixin css-triangle ($direction: "down", $size: 20px, $color: #000, $fillColor:#fff) {
         0;
        height: 0;
        position: relative;
        z-index: 0;
        border-left: #{setTriangleSize($direction, "left", $size)} solid #{setTriangleColor($direction, "left", $color)};
        border-right: #{setTriangleSize($direction, "right", $size)} solid #{setTriangleColor($direction, "right", $color)};
        border-bottom: #{setTriangleSize($direction, "bottom", $size)} solid #{setTriangleColor($direction, "bottom", $color)};
        border-top: #{setTriangleSize($direction, "top", $size)} solid #{setTriangleColor($direction, "top", $color)};

        .#{$namespace}triangle-fill{
             0;
            height: 0;
            position: absolute;
            left: -($size/2-1);
            top:-($size);
            z-index: 1;
            border-left: #{setTriangleSize($direction, "left", $size)} solid #{setTriangleColor($direction, "left", $fillColor)};
            border-right: #{setTriangleSize($direction, "right", $size)} solid #{setTriangleColor($direction, "right", $fillColor)};
            border-bottom: #{setTriangleSize($direction, "bottom", $size)} solid #{setTriangleColor($direction, "bottom", $fillColor)};
            border-top: #{setTriangleSize($direction, "top", $size)} solid #{setTriangleColor($direction, "top", $fillColor)};
        }
    }
    @function setTriangleColor($direction, $side, $color) {

        @if $direction == "left" and $side == "right"
        or  $direction == "right" and $side == "left"
        or $direction == "down" and $side == "top"
        or $direction == "up" and $side == "bottom" {
            @return $color
        } @else {
            @return "transparent";
        }
    }
    @function setTriangleSize($direction, $side, $size){
        @if (($direction == "left" or $direction == "right") and ($side=="left" or $side=="right"))
            or (($direction == "up" or $direction == "down") and ($side=="top" or $side=="bottom")){
            @return $size/2;
        } @else{
            @return $size;
        }
    }

    @function setTriangleOffset($direction, $side, $size){
        @if (($direction == "left" or $direction == "right") and ($side=="left" or $side=="right"))
            or (($direction == "up" or $direction == "down") and ($side=="top" or $side=="bottom")){
            @return $size/2;
        } @else{
            @return $size;
        }
    }

  • 相关阅读:
    libsvm参数学习和核函数使用(转载)
    libsvm 训练后的模型参数讲解(转)
    Ternary Search Trees 三分搜索树
    分支界定法 branch-and-bound 分析与实现)(转载)
    几种常见的激活函数(转载)
    matlab神经网络实验
    递归神经网络2(转载)
    线性代数和numpy——黑板客老师课程学习
    关于 Intellij IDEA Ultimate Edition 14.1控制台中文乱码 解决
    Intellij IDEA Ultimate Edition 14.1 破解
  • 原文地址:https://www.cnblogs.com/wsion/p/5276108.html
Copyright © 2011-2022 走看看