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;
        }
    }

  • 相关阅读:
    Deep Learning入门
    基本技能(一)
    NNCRF之NNSegmentation, NNPostagging, NNNameEntity
    word2vector 使用方法 计算语义相似度
    Berkeley parser使用方法
    zpar使用方法之Chinese Word Segmentation
    【delphi】delphi出现‘尚未调用CoInitialize’异常
    VS05 VS08 VS10 工程之间的转换
    odbc数据源for mysql
    【delphi】Delphi过程、函数传递参数的八种方式
  • 原文地址:https://www.cnblogs.com/wsion/p/5276108.html
Copyright © 2011-2022 走看看