zoukankan      html  css  js  c++  java
  • scss

    @mixin angle($direction,$color,$value,$start){
    content:"";
    position:absolute;
    @if $direction=="bottom"{
    border-top:solid $color $value;
    border-right:solid transparent $value;
    border-left:solid transparent $value;
    bottom:0;
    left:50%;
    transform:translate(-50%,100%);
    }
    @if $direction=="top"{
    border-bottom:solid $color $value;
    border-right:solid transparent $value;
    border-left:solid transparent $value;
    top:0;
    left:50%;
    transform:translate(-50%,-100%);
    }
    @if $direction=="left"{
    border-right:solid $color $value;
    border-top:solid transparent $value;
    border-bottom:solid transparent $value;
    top:0;
    left:0;
    transform:translate(-100%,0);
    }
    @if $direction=="right"{
    border-left:solid $color $value;
    border-top:solid transparent $value;
    border-bottom:solid transparent $value;
    top:0;

    @if $start=="end"
    {
    right:0
    }
    @else{
    left:-0.5vw
    }

    //@if (!!$start){left:-0.5vw}
    transform:translate(100%,0);
    }
    }


    .anglebottomleftselect{
    position: relative;
    10vw;
    height:1vw;
    background:red;
    }
    .anglebottomleftselect:before{
    @include angle("right",blue,0.5vw,"end");
    }
    .anglebottomleftselect:after{
    @include angle("right",#fff,0.5vw,"start");
    }

    <div class="anglebottomleftselect">test</div>

  • 相关阅读:
    Java学习开篇
    《我的姐姐》
    世上本无事,庸人自扰之
    这48小时
    补觉
    淡定
    es java api 设置index mapping 报错 mapping source must be pairs of fieldnames and properties definition.
    java mongodb groupby分组查询
    linux 常用命令
    mongodb too many users are authenticated
  • 原文地址:https://www.cnblogs.com/jayruan/p/7087975.html
Copyright © 2011-2022 走看看