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

  • 相关阅读:
    ASP.NET 4.0 与 Entity Framework 4第一篇采用ModelFirst 开发方式创建数据库
    Web SSH 客户端Ajaxterm安装
    新浪微博Wordpress插件博客微博安装手册
    Sharetronix 微博客系统安装手册
    ASP.NET 4.0 与 Entity Framework 4第三篇使用Entity Framework调用存储过程
    QQ概念版体验[多图]
    您博客应该有的8个设计要素
    Centos 系统更新Python
    每天一个linux命令(28):tar命令
    C# 类(5) 重载
  • 原文地址:https://www.cnblogs.com/wsion/p/5276108.html
Copyright © 2011-2022 走看看