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>

  • 相关阅读:
    「专题总结」后缀自动机
    「专题总结」回文自动机
    「专题总结」后缀数组
    2.11毕设进度
    2.10毕设进度
    2.09毕设进度
    2.08毕设进度
    2.07毕设进度
    2.06毕设进度
    2.05毕设进度
  • 原文地址:https://www.cnblogs.com/jayruan/p/7087975.html
Copyright © 2011-2022 走看看