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>

  • 相关阅读:
    VSCODE极简配置(备份)
    顺时针打印矩阵--剑指offer
    回文链表 leetcode
    E
    E. Kleof&#225;š and the n-thlon
    单调栈板子
    D
    CodeForces 600E Lomsat gelral(线段树合并)
    C# 面试宝典
    JavaScript 火花效果
  • 原文地址:https://www.cnblogs.com/jayruan/p/7087975.html
Copyright © 2011-2022 走看看